Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)

React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled. React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior

Reassigning a variable after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead

Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)