我正在尝试使用react-hook-form，它是一个多步骤形式，并且其中一个步骤具有条件form field。

该字段的条件是boolean属性为true。如果是真的，我想显示一组与该属性有关的问题。

我找到了这个example，并且尝试按照其逻辑进行尝试，如下所示：

import React,{ useEffect } from "react";
import ReactDOM from "react-dom";

import useForm from "react-hook-form";
import { withRouter } from "react-router-dom";
import { useStateMachine } from "little-state-machine";
import updateaction from "./updateaction";




const Techniques = props => {
  const { register,unregister,handleSubmit,setvalue,watch,errors } = useForm();
  const { action } = useStateMachine(updateaction);
  const onSubit = data => {
    action(data);
    props.history.push("./ProposalInnovation");
  };

const fundingOffer = watch("fundingOffer");

const CustomInput = React.memo(({ register,fundingOffer }) => {
  useEffect(() => {
    register({ fundingOffer });

    return () => unregister(fundingOffer);
  },[fundingOffer,register,unregister]);
  return <input onChange={e => setvalue(fundingOffer,e.target.value)} />;
});

function App() {
  const { register,watch } = useForm();
  const fundingOffer = watch("fundingOffer");


  return (

    <div>
      <form onSubmit={handleSubmit(onSubit)}>

        <label>Test for condition:</label>
        <radio 
          ref={register} 
          name="fundingOffer"

        />

        <label>Conditional Field:</label>
        {fundingOffer == true && (
          <CustomInput {...{ register,fundingOffer: false }} />
        )}



        <input type="submit" value="next" />    




      </form>

    </div>  
  );
};
};

export default withRouter(Techniques);

在我的代码中尝试此操作时，出现错误消息：

React Hook useEffect无法在回调内部调用。必须在React函数组件或自定义的React Hook函数中调用React Hooks

我认为问题在于我已经在多步骤表单中使用了钩子-也许算不上顶层（当我进入多步骤表单有几步时）。

有人知道如何在这种表单结构的钩子中使用条件逻辑吗？