ESLint error in window example

[Sam-Kruglov]

virtual/examples/react/window/src/main.tsx

Line 15 in 5d6acc9

scrollMargin: listRef.current?.offsetTop ?? 0,

Error: Cannot access refs during render

React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
...
> 15 |     scrollMargin: listRef.current?.offsetTop ?? 0
      |                   ^^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot access ref value during render
(react-hooks/refs)

I tried:

1. scrollMargin: 0 - this causes problems because now my list of accordions is not shifting when accordion is expanded
2. I tried 1. and also adding a useEffect/useLayoutEffect to change virtualizer.options.scrollMargin whenever listRef is set but then I get another error :

   Error: This value cannot be modified
   Modifying a value returned from a hook is not allowed. Consider moving the modification into the hook where the value is constructed.
   (react-hooks/immutability)
   

   However I'm currently updating that value like so in useLayoutEffect and it works without ESLint errors but I think ESLint might just be not seeing it - this is my current working setup (accordions expand, the elements move down to make space but I do have the react-hooks/refs error):

   new ResizeObserver(() => {
       virtualizer.options.scrollMargin = listRef.current!.offsetTop
     })