I have two different sets of setTimeouts that are to be run depending if the browser's width is above 991px. My idea to resolve this was to put a function in an useEffect that would test the browsers width then choose between the sets of Timeouts. The issue with this is you are not suppose to put a function in useEffect that runs external to it. I have included the code I am working on basically as psuedocode to get across the idea I was speaking about. What can I do to resolve this?

 useEffect(()=>{
  function getWindowDimensions() {
    const { innerWidth: width } = window;
    return {
      width,
    };
  }
},[])
  function testWidth() {
      if (width > 991) {
        setTimeout(() => {
          symbol.style.opacity = "1";
        }, 400);
        setTimeout(() => {
          symbol.style.bottom = "6%";
        }, 500);
      } else {
        setTimeout(() => {
          symbol.style.opacity = "1";
        }, 400);
        setTimeout(() => {
          symbol.style.bottom = "6%";
        }, 500);
      }
  }