IntersectionObserver not immediately applying (using React custom hook)

Question

I'm using IntersectionObserver to create a useIntersection custom hook to determine whether and which side a target element is intersecting with a boundary element.

Using this, I am trying to position the target element to the other side so that it doesn't intersect anymore (is fully shown on the screen). But the intersectingSide is only properly determined after opening and closing twice, and then opening it again for the third time. After that, it stays properly displayed as I wish.

For example, I'm using this in the Dropdown component. When the dropdown is opened, it intersects with the boundary element on the right. But it doesn't shift to the left immediately. I have to do the above mentioned "dance" to finally shift it to the left.

Something I realized is that upon opening/closing a single Dropdown instance, all other Dropdown instance that are mounted are re-rendered as well.

How can I fix this to immediately shift to the non-intersecting side?

// useIntersection.tsx

import { RefObject, useEffect, useRef } from "react";

export default function useIntersection(
  elementRef: RefObject<Element>,
  boundaryElement?: RefObject<Element>
) {
  const intersectingSideRef = useRef<"left" | "right">("left");

  const updateEntry = ([entry]: IntersectionObserverEntry[]) => {
    if (entry.isIntersecting) {
      const { left, right } = entry.boundingClientRect;
      if (left <= 0) {
        intersectingSideRef.current = "left";
      } else if (
        right >=
        (boundaryElement?.current?.getBoundingClientRect().right ??
          window.innerWidth)
      ) {
        intersectingSideRef.current = "right";
      }
      return;
    }
  };

  useEffect(() => {
    const elementNode = elementRef?.current;

    if (!elementNode) return;

    const observerOptions = {
      root: boundaryElement?.current ?? null,
    };
    const observer = new IntersectionObserver(updateEntry, observerOptions);
    observer.observe(elementNode);

    return () => observer.disconnect();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [elementRef?.current]);

  return intersectingSideRef.current;
}

// Dropdown.tsx

export default function Dropdown({
  buttonContent,
  boundaryElementRef,
  children,
}: Props) {
  const dropdownRef = useRef<HTMLUListElement>(null);

  const [isOpen, setIsOpen] = useState(false);
  const intersectingSide = useIntersection(dropdownRef, boundaryElementRef);
  const containerRef = useOutsideClick(() => setIsOpen(false));

  const onToggleIsOpen = (e: MouseEvent) => {
    e.stopPropagation();
    setIsOpen((prev) => !prev);
  };

  return (
    <StyledDropdown ref={containerRef}>
      <DropdownButtonContainer {...{ type: "button", onClick: onToggleIsOpen }}>
        {buttonContent}
      </DropdownButtonContainer>

      {isOpen && children && (
        <DropdownList
          {...{
            ref: dropdownRef,
            $intersectingSide: intersectingSide,
            onClick: () => setIsOpen(false),
          }}>
          {children}
        </DropdownList>
      )}
    </StyledDropdown>
  );
}

// ProductItem.tsx

<Dropdown
  productName={item.title} // TODO: Remove
  buttonContent={
    <Button variant="plain" style={{ padding: 0 }}>
      <img src={dotsIcon} />
    </Button>
  }
  boundaryElementRef={productItemRef}>
    {sellerOptions.map(({ variant, item, onClick }, idx) => (
      <DropdownItem key={idx} variant={variant} onClick={onClick}>
        {item.title}
      </DropdownItem>
    ))}
</Dropdown>