UseMeasure() always returning width:0 ,can't find the Problem

Question

i am trying to make loading animation ,therefore i need width of div, but when i use useMeasurment() , the value it returns is 0. I can't find out why.any help?

In the tutorial i was watching ,it works just fine ,maybe theres problem in my classes? I don't know.Thanks in advance.

import react, { useState } from "react";
import starLogo from '../img/logo.svg';
import starText from '../img/starskyproject.svg';
import './Enter.css';
import { BrowserRouter as Router,Routes,Route,Link } from "react-router-dom";
import Gl from "./gitch.js";
import useMeasure from 'react-use-measure';
import {useSpring, animated} from 'react-spring';


export default function Enter(){

//Loading
const [active, toggle] = useState(false);
const [ref, {width}] = useMeasure();
console.log({width});
const props = useSpring({
    from : {width: 0 },
    to: {width}
})

//

//Enter Click
const elem = document.body;
elem.addEventListener("keypress", (event)=> {
if (event.key === 'Enter') { 
    document.getElementById('enter').click();
}
});
//




 return(
 <div className="enter-content">
<div className="enter-content2">
    <img  className="glitch"   src={starLogo}></img>
     <img className="strsk"  src={starText}></img>
     <Link id="enter" className="btnenter" to="/st">Enter</Link>
</div>
<div  className=""  onClick={() => toggle(!active)}>
     <animated.div ref={ref} className="fill" style={{ width: props.width }} />
</div>
</div>
 

 )



 }