useState doesn't change simple state - reactjs

Question

I need to set height of 'tbody' dynamically. That is why I use 'useRef' which watch to position of the element 'tfoot', and check 'tfoot.offsetTop' and change 'heightTbody' until the tbody is positioned all the way to the bottom. In 'positionChecker' I compare window.height and 'tfoot.offsetTop'. In the condition i try to change the state but unsuccesseble
What I do wrong?
Thanks
Component.tsx
.....several imports
const Component= () => {
const store = useContext(Context);
const [id, setId] = useState('');
const [heightTbody, setHeightTbody] = useState(650);
const checkVisibilityFoot = useRef<HTMLTableSectionElement>(null);
const [list, setList] = useState<ContentI[]>([]);
const fetchData = async () => {
const temp = await store.getContent();
setList(temp);
};
const resizeHolder = (e: UIEvent) => {
const w = e.target as Window;
if (!isNaN(w.innerHeight) && isFinite(w.innerHeight))
positionChecker(w.innerHeight, checkVisibilityFoot.current?.offsetTop as number);
};
const positionChecker = (windHeight: number, checkVisFoot: number) => {
if (windHeight < checkVisFoot) {
setHeightTbody((prevState) => prevState - 1); // <-- here must be changed
positionChecker(windHeight, checkVisibilityFoot.current?.offsetTop as number);
}
};
useEffect(() => {
fetchData();
}, []);
window.addEventListener('resize', resizeHolder);
return (
<table>
<tbody style={{ height: heightTbody + 'px' }}>
......content
</tbody>
<tfoot ref={checkVisibilityFoot}></tfoot>
</table>
)

Answer 1

If you want to watch for changes, pass params to useEffect array.