fix(BOOK-637): Using useLayoutEffect to avoid issues with refs with null values

Approved-by: Matilda Landström

packages/common/hooks/useStickyPosition.ts

@@ -1,6 +1,6 @@
 "use client"
 
-import { useCallback, useEffect } from "react"
+import { useCallback, useEffect, useLayoutEffect } from "react"
 
 import useStickyPositionStore, {
   type StickyElement,
@@ -45,7 +45,7 @@ export default function useStickyPosition({
   } = useStickyPositionStore()
   const baseTopOffset = 0
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (ref && name) {
       // Register the sticky element with the given ref, name, and group.
       // If the group is not provided, it defaults to the value of the name.
@@ -92,7 +92,7 @@ export default function useStickyPosition({
     [baseTopOffset, stickyElements]
   )
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (ref) {
       // Find the index of the current sticky element in the array of stickyElements.
       // This helps us determine its position relative to other sticky elements.