Javascript Can'；t执行反应状态更新-反应手势库

在尝试了不同的解决方案，包括推荐的方法之后，似乎没有什么能解决我的问题

编辑：我注意到这只发生在第一次渲染后的第一次渲染上，我没有收到任何错误

我在我的组件中使用react手势库，如下所示：

return (
    <CardsContainer>
      <Gallery
        style={{
          background: "linear-gradient(to bottom, #FFFFFF,#5643fa )"
        }}
        index={index}
        onRequestChange={ i => setIndex(i)}
      >
        <SingleSwipeCard
          handleClick={() => startDefaultGame()}
          text={practiceSavedWordsText}
        />
       <SingleSwipeCard
          handleClick={() => startDefinitionGame()}
          text={practiceCompletingSentences}
        />
      <SingleSwipeCard
          handleClick={() => startGrammerGame()}
          text={practiceTypingWordsText}
        />
    </Gallery>
   </CardsContainer>
)

动画按预期工作，但问题是我的

handleClick

功能正在将用户重定向到应用程序中的另一个页面，因此我得

无法对未安装的组件执行反应状态更新…

虽然该组件在页面路由函数之后似乎没有呈现，并且在最后一次呈现时调用了cleanUp函数，但是这里缺少了一些东西，我得到了一个内存泄漏

 useEffect(() => {
    console.log("did mount");

    timer = setInterval(() => {
      if (index === 2) {
        setIndex(0);
      } else setIndex(index + 1);
    }, 8000);

    return () => {
      console.log("un mount");
      clearInterval(timer);
    };
  }, [index, gameStarted]);