I try to catch image's size and control it. For example I got image 80*100 size and I have to increase it and set this size to image's wrapper.

I use layoutEffect and useState but after render state doesn’t write real size. In currentRef it has sizes but in state - nope. enter image description here

How to correctly check and control size?

  const targetRef = useRef<HTMLImageElement | null>(null);

  const [dimensions, setDimensions] = useState<{
    width: number;
    height: number;
  }>({ width: 0, height: 0 });

  useLayoutEffect(() => {
    if (targetRef.current) {
      setDimensions({
        width: targetRef.current.offsetWidth,
        height: targetRef.current.offsetHeight,
      });
    }
  }, []);