我有一个页面，其中有一列div，每个div都有自己的isVisible状态。在鼠标输入时，div淡出并使用帧运动从DOM中删除。我试图跟踪div的数量，因为当最后一个被删除时，我想再次运行randNumber数组来重新填充列，但它不起作用。它也似乎像React状态是不计数删除的div正确

<div
      className={`grid h-[var(--vh)] grid-cols-6 gap-x-[10px] overflow-hidden p-[10px] md:gap-x-[20px] lg:grid-cols-10`}
    >
      <LogoStack />
      <LogoStack />
      <LogoStack />
      <LogoStack hideTablet />
      <LogoStack hideTablet />
    </div>

const LogoStack = ({ hideTablet }: { hideTablet?: boolean }) => {
    const [randNumber, setRandNumber] = useState<number | undefined>(undefined)
  useEffect(() => {
    setRandNumber(getRandomInt(10, 30))
  }, [setRandNumber])

  useEffect(() => {
    if (randNumber === 0) {
      setRandNumber(getRandomInt(10, 30))
    }
  }, [randNumber, setRandNumber])
  return (
    <div
      className={`col-span-2 flex-col-reverse justify-start ${
        hideTablet ? 'hidden lg:flex' : 'flex'
      }`}
    >
      {[...Array(randNumber)].map((_, i: number) => {
        return (
          <LogoAnim
            key={i}
            idx={i}
            randNumber={randNumber}
            setRandNumber={setRandNumber}
          />
        )
      })}
    </div>
  )
}

const LogoAnim = ({
  randNumber,
  setRandNumber,
  idx,
}: {
  randNumber?: number
  setRandNumber?: Dispatch<SetStateAction<number>>
  idx?: number
}) => {
  const [isVisisble, setIsVisible] = useState<boolean>(true)

  return (
    <AnimatePresence mode="sync">
      {isVisisble && (
        <motion.div
          key={'logo-' + idx}
          className={`logo cursor-pointer overflow-hidden`}
          initial={'visible'}
          animate={isVisisble ? 'visible' : 'hidden'}
          exit={'hidden'}
          variants={variants}
          transition={{
            duration: 0.4,
            delay: 0,
          }}
          onMouseEnter={() => {
            setTimeout(() => {
              setRandNumber(randNumber - 1)
            }, 0)
            setIsVisible(false)
          }}
        >
          <motion.div
            key={'text-anim-' + idx}
            className=""
            initial={'hidden'}
            animate={'visible'}
            exit={'hidden'}
            variants={variants}
            transition={{
              duration: 0.3,
              delay: (idx * 100) / 1000,
            }}
          >
            <motion.div
              key={'text-anim-' + idx}
              className=""
              initial={'visible'}
              animate={isVisisble ? 'visible' : 'hidden'}
              exit={'hidden'}
              variants={textVariants}
              transition={{
                duration: 0,
                delay: 0.4,
              }}
            >
              <MainLogo />
            </motion.div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  )
}