Next.js表单组件无法切换步骤的问题求助：仅动态导入（ssr:false）时正常

大家好，我在开发Next.js的注册流程表单时碰到了一个诡异的问题：表单的步骤切换功能完全失效，只有把组件用动态导入并设置ssr:false的方式引入时，步骤切换才能正常工作，静态导入组件就不行。

先贴一下我的核心代码：

"use client";

import { useAuthHook } from "@/context/use-auth-context";
import dynamic from "next/dynamic";
import React, { useState } from "react";
import { useFormContext } from "react-hook-form";
import SignUpForm from "./sign-up-form";

type Props = {};

// 下面这段是我之前尝试的动态导入SignUpForm的代码，当时测试下来也没解决问题
// const SignUpForm = dynamic(
//   () => import("@/components/forms/sign-up/sign-up-form"),
//   {
//     ssr: false,
//   }
// );

const OTPForm = dynamic(() => import("@/components/forms/sign-up/otp-form"), {
  ssr: false,
});

export const RegistrationFormStep = (props: Props) => {
  const {
    register,
    formState: { errors },
    setValue,
  } = useFormContext();
  const [onOTP, setOnOTP] = useState<string>("");
  const { currentStep } = useAuthHook();

  setValue("otp", onOTP);

  switch (currentStep) {
    case 1:
      return <SignUpForm errors={errors} register={register} />;
    case 2:
      return <OTPForm onOTP={onOTP} setOnOTP={setOnOTP} />;
    // 省略了其他步骤的逻辑
    default:
      return <SignUpForm errors={errors} register={register} />;
  }
};

具体的问题表现是：当我静态导入SignUpForm时，从步骤1切换到步骤2（OTPForm）后，再切回步骤1，组件不会重新渲染SignUpForm，甚至有时候步骤切换完全没反应。但只要把OTPForm改成动态导入并设置ssr:false，步骤切换就突然正常了。

我已经排查过useAuthHook里的currentStep状态，它确实在正确更新，状态值是有变化的，但组件就是不跟着切换渲染对应的表单。有没有大佬遇到过类似的情况？或者能帮我分析下为什么动态导入加ssr:false能解决这个问题，静态导入就不行呢？

麻烦各位帮忙看看，感谢！

备注：内容来源于stack exchange，提问作者Jean Mako