useRef is always null until I update and save my code - reactjs

Question

I'm using a useRef on a tag to get the width value. But when the page is loaded, ref is always null. The only time it gets the value, it's when I update my code and save it inside my IDE. This is the current code :
import { Navbar } from './Navbar';
import photo from './assets/photo.jpg';
import shoes from './assets/shoes.jpg';
import jump from './assets/jump.jpg';
import { getShoes } from './Request';
import { useQuery } from 'react-query';
import { motion } from 'framer-motion';
import { useEffect, useRef, useState } from 'react';
import { Loader } from './Loader';
export const Home = () => {
const { data, isSuccess } = useQuery('shoes', getShoes);
const [carouselMaxWidth, setCarouselMaxWidth] = useState<number>(0);
const ref = useRef<HTMLDivElement | null>(null);
useEffect(() => {
console.log(ref);
if (ref && ref.current) {
const tmp = ref.current?.scrollWidth - ref.current?.offsetWidth;
setCarouselMaxWidth(() => tmp);
}
}, []);
return (
<>
{isSuccess ? (
<div className='h-screen'>
<div ref={ref} className='overflow-x-hidden'>
<motion.div
className='flex min-w-fit space-x-5 cursor-grab'
drag='x'
dragConstraints={{ right: 0, left: -carouselMaxWidth }}
style={{ width: carouselMaxWidth }}
>
{data.slice(0, 10).map((i: any, key: number) => {
return (
<motion.div className='h-full w-96 pointer-events-none' key={key}>
<img src={i.img} alt={i.title} className='object-cover h-96 w-96' />
<div className='flex justify-between'>
<div>
<span>{i.title}</span>
<div className='text-opacity-50'>{i.source}</div>
</div>
<span>{i.price}</span>
</div>
</motion.div>
);
})}
</motion.div>
</div>
</div>
</div>
) : (
<Loader />
)}
</>
);
};