Trying to useEffect in react but my code does not work

I'm trying to change the left style attribute of the element when a change happens but my code does not work, do you know why?

The Function Component:

const Link: React.FunctionComponent<{ name: string, href?: string }> = function ({ name, href }) {          const filteredName = name.toLowerCase().trim().split(" ").join("")          var res = 0          useEffect(()=>{               function handleResize() {                    const w = globalThis.outerWidth                    const h = globalThis.outerHeight                    let index = 0                    for (let elem = 0;elem<allDataElems.length;elem++) {                         if (allDataElems[elem] === name) {                              index = elem + 1                              break                         }                    }                    var elSize = null                    try {                         elSize = ulEl.current!.scrollTop + (ulEl.current!.firstElementChild!.scrollHeight * (index)) + index * 32 - 250                    } catch {                         elSize = 0                    }                    return (w*28*3/1000)*(elSize/h)               }               res = handleResize()          })          return <li style={{top: "20px",left: res +"px"}}><Anchor href={href || `/${name.replace(/ /g, "_")}`}><a onClick={() => closeNav()} onMouseOver={() => setHovering(filteredName as keyof typeof datas)}>{name}</a></Anchor></li>     }

Where I used it:

<Link name="Home" href="/"></Link><Link name="Project"></Link><Link name="Team"></Link><Link name="Description"></Link><Link name="Human Practices"></Link><Link name="Judging Form"></Link><Link name="Gallery"></Link>