Ошибка при перемещении фреймера React. Невозможно прочитать свойство getBoundingClientRect для undefine при использовании ловушки useAnimation

Question

Я создаю на своем веб-сайте функцию, в которой, когда вы прокручиваете определенный элемент div (т. Е. Больше не в поле зрения, с использованием react-intersection-observer), другой элемент анимируется (используя framer-motion useAnimation() крюк)

Я работаю в nextjs, и страница отображается на стороне сервера

      const topViewVariants = {
  hide: {
    y: "-100%",
  },
  show: {
    y: "0",
  },
};

const TopView = ({ inView }: { inView: boolean }) => {
  const controls = useAnimation();
  useEffect(() => {
    if (inView) {
      controls.start("hide");
    } else {
      controls.start("show");
    }
  }, [inView, controls]);
  return (
    <MotionMyBox
      variants={topViewVariants}
      animate={controls}
      initial="hide"
      position="fixed"
      top="0"
      w="100%"
      zIndex="30"
      display={{
        base: "block",
        md: "none",
      }}
    >
      <HStack p="4">
        <MyImage
          src="/images/home/header/4.jpg"
          alt=""
          boxSize={{
            base: "20",
            md: "20",
            lg: "20",
          }}
          quality=""
        />
        <VStack
          alignSelf="start"
          justifyItems="start"
          alignItems="start"
          spacing="1"
        >
          <Heading
            textTransform="uppercase"
            fontWeight="thin"
            fontSize="lg"
            display="inline-flex"
            justifyContent="center"
            w="100%"
          >
            xtreme torpe
            <Badge colorScheme="red" alignSelf="start" ml="2">
              E
            </Badge>
          </Heading>
          <Text fontSize="sm" fontWeight="semibold">
            {dayjs(new Date()).format("h:mm A, dddd MMMM D")}
          </Text>
          <Text fontStyle="italic" fontSize="xs" opacity="0.8">
            Hosted by Damien
          </Text>
        </VStack>
      </HStack>
    </MotionMyBox>
  );
};

const Event = ({}: Party) => {
    const [infoRef, infoInView] = useInView({
    threshold: 0,
  });
   return (
     <TopView inView={infoInView} />
     <div ref={infoRef}></div>
   )
}

Я также использую библиотеку пользовательского интерфейса под названием chakra-ui

Я действительно не понимаю этой ошибки, потому что логика довольно проста, если <div> на виду, затем запустите эту анимацию.