Resize observer not firing

```
//useElementSize.tsx
import useResizeObserver from '@react-hook/resize-observer';
import { MutableRefObject, useLayoutEffect, useState } from 'react';

interface Size {
width: number;
height: number;
}

export default function useElementSize(
target: MutableRefObject,
) {
const [size, setSize] = useState({
width: 0,
height: 0,
});

useLayoutEffect(() => {
target.current && setSize(target.current.getBoundingClientRect());
}, [target]);

useResizeObserver(target, (entry) => {
setSize(entry.contentRect);
});

return size;
}
```
```
//Other component
import { Box } from '@mui/material';
import clsx from 'clsx';
import { Fragment, useRef, useState } from 'react';
import { useInView } from 'react-intersection-observer';
import Config from '../../../../config';
import { ViewerMode } from '../../../../models';
import { ScannedPage } from '../../../../models/generated';
import useScrollNavigationStore from '../../../../stores/ScrollNavigationStore';
import style from './DocumentPage.module.scss';
import { Word } from '../../../ui';
import useSize from '@react-hook/size';
import useElementSize from '../../../../hooks/useElementSize';

type DocumentPageProps = {
docIndex: number;
docPageIndex: number;
viewerMode: ViewerMode;
scannedPage: ScannedPage;
selected?: boolean;
};

export const DocumentPage = ({
docIndex,
docPageIndex,
viewerMode,
scannedPage,
selected = false,
}: DocumentPageProps) => {
const documentPageSrc = `${Config.API_BASE_URL}/api/v1/core/file/${encodeURIComponent(
scannedPage.imagePath,
)}/lob/Personenversicherung`;
const [isLoading, setIsLoading] = useState(true);
const setSelectedIndexes = useScrollNavigationStore(
(state) => state.setSelectedIndexes,
);
const imgRef = useRef(null);
const { width, height } = useElementSize(imgRef);
const widthRatio = width / scannedPage.width;
const heightRatio = height / scannedPage.height;
const { ref, inView } = useInView({
triggerOnce: true,
rootMargin: '0px 0px 90% 0px',
threshold: 0.8,
});

return (
handleClick([docIndex, docPageIndex], viewerMode)}
>
{inView ? (

handleImgLoad()}
aria-hidden="true"
/>
{viewerMode === ViewerMode.Viewer &&
scannedPage.scannedLineBoxes?.map((line, lineIndex) => {
return (

{line.words?.map((word, wordIndex) => {
return (


{word.text}


);
})}

);
})}

```
I'm not sure why but Resize observer is not triggering at all. I tried using **useSize** hook implemented from this lib but this also is not working. Can you pls help me somebody ? What can cause this issue ? When I use **target.current** in dependency array of **useLayoutEffect** the initial width and height get set but consecutive resizing doesn't trigger anything.

Start with hooks/useElementSize.tsx and the DocumentPage component, then reproduce the reported behavior while resizing the rendered image. Compare the useResizeObserver and useSize integrations and inspect whether the referenced element is observed as expected. Done means width and height update after consecutive resizes and the overlay ratios respond accordingly.

Written by the indexing model from the issue text.