我有一个使用react-google-recaptcha的Next.js应用程序。我在一个多部分表单中使用它，当用户通过表单前进时，我会改变视图。当用户到达具有ReCAPTCHA的视图时，它会正确加载。但如果用户单击“后退”（更改视图状态并导致ReCAPTCHA被卸载），然后单击“下一步”返回到具有ReCAPTCHA的视图，它不会呈现。
有什么办法可以纠正这个问题吗？

const View1 = ({onNext}) => ...

const View2 = ({onNext, onBack}) => ...

const View3 = ({onBack}) => {

  const recaptchaRef = createRef()

  const onReCAPTCHAChange = (captchaCode) => {
    if(!captchaCode) return
    console.log(captchaCode)
  }

  return (
    <div className="p-4 rounded bg-gray-100">
      <div>View 3</div>
      <div>
      <ReCAPTCHA
        ref={recaptchaRef}
        size="compact" // invisible, normal, compact
        sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}
        onChange={onReCAPTCHAChange}
        badge="inline" // bottomright, bottomleft, inline
      />
      </div>
      <div className="flex items-center gap-4">
        <button className="btn-primary" onClick={onBack}>Back</button>
      </div>
    </div>
  )
}

export default function Sandbox() {

  const [view, setView] = useState(1)

  return (
    <div>

      {
        view===1 ? <View1 onNext={()=>setView(2)} /> :
        view===2 ? <View2 onNext={()=>setView(3)} onBack={()=>setView(1)} /> :
        view===3 ? <View3 onBack={()=>setView(2)} /> : null
      }

    </div>
  )
}