我在我的项目中遇到了一个React组件的问题，当我在导航过程中需要点击两次才能正确记录右键点击的变量。以下是问题的详细信息和我的代码：

我有一个React组件，表示课程课程导航系统。当我在导航菜单中点击一个课程时，它应该记录所点击课程的索引并启动某些操作。然而，我注意到我需要点击两次才能正确记录索引。

在组件内部，有一个名为handleOtp的函数，它处理启动视频播放和设置视频访问OTP的逻辑。问题似乎源自这个函数。

以下是handleOtp函数的简化概述：

const handleOtp = async () => {
  try {
    const lessonId = course.lessons[clicked]?.video?.id;

    // 这是有问题的区域
    const { data } = await axios.post("/api/videoOtp", {
      videoId: lessonId,
      username: user.username,
      ip,
    });

    if (!data.otp && !data.playbackInfo) {
      return toast.error("视频OTP失败！重新加载页面");
    }

    loadVideo({
      otp: data.otp,
      playbackInfo: data.playbackInfo,
      configuration: {
        autoplay: true,
      },
      container: container.current,
    });
  } catch (err) {
    console.error(err);
  }
};

根据我的观察，第一次点击触发了handleOtp函数，但是点击的索引错误，导致了意外的行为。第二次点击最终记录了正确的点击索引，并按预期工作。

我已确保没有可能引起问题的异步状态更新。我怀疑可能存在一个时间或状态管理问题导致了这种行为，但我很难确定确切的原因。

我希望能够理解为什么会发生这种双击行为，以及如何确保在第一次点击时记录正确的点击索引。非常感谢任何见解或建议。谢谢！

我的React组件：

<StudentRoute>
        <div className="row mt-2">
          <div className="lessons-menu">
            <Menu
              defaultSelectedKeys={[clicked]}
              inlineCollapsed={collapsed}
              style={{ height: "100%" }}
            >
              {course.lessons.map((lesson, index) => (
                <Item
                  onClick={async () => {
                    setClicked(index);
                    setIsLoading(true);
                    setSpin(true);
                    setCheckoutVisibility("none");
                    checkTransactionStatus(index);
                    setPaymentMethod("kiosk");
                    setKioskPhoneNumber("");
                    handleOtp();
                  }}
                  
                  key={index}
                  icon={<Avatar>{index + 1}</Avatar>}
                >

尝试使用console.log记录clicked变量：