How to specify a condition in react so that dom elements are accessed after the component is loaded?

Question

React

React application, functional components, not class components, pages in the application are made using GoldenLayout layers. When filling out the form on the main page, a transition occurs and others appear. On the main page, I need to remove the resize icon (which is in the upper right corner), but leave it on the others. The pages are interconnected through config, so just removing the icon in config does not work through the following code (icons disappear from all pages)

settings: {
    showMaximiseIcon: false,
  }

I managed to remove the icon by accessing the DOM, but on some pages I get an error message that I try to access the style property of undefined. I tried to solve this problem through window.onload, but it did not work, the error still appears. Tell me how to rewrite the function so that the dom elements are accessed after the page is fully loaded, when there are already dom elements? (similar to the componentDidUpdate lifecycle in a class component)

useHideResizeControl('Прокси-модели');


export const useHideResizeControl = name => {
  useMemo(() => {
    (window.onload = () => {
      const resizeControl = document.querySelector(`[title="${name}"]`)?.parentNode?.parentNode;
      if (resizeControl) {
        resizeControl.children[1].children[1].style.display = 'none';
      }
    })();
  }, [name]);
};

Answer 1

The home in React is directly accessed using useRef,
https://reactjs.org/docs/hooks-reference.html#useref
Make a ref on the nearest parent for the resize icon and search from it.