Reactjs 使用react上下文变量时初始化formik表单的正确方法

考虑以下代码

...//somewhere in parent
const [history, setHistory] = useState({type: "ancient", history: "world", date: "2020-01-22"})
const [editMode, setEditMode] = useState(false);
return (
  <>
    <MyButton onClick={()=>{setEditMode(!editMode)}}
    {editMode && <MyReactComponent history={history}/>}
  </>);

//this component is used and history is passed in
const MyReactComponent = ({history})=>{
    const myInitialValues = {history_type: history.type, history_name: history.history, history_date: history.date}
    const myFormik = useFormik({initialValues: myInitialValues})
    const {values, setField} = myFormik;
    const clearAll = ()=> {
        setField("history_type", "");
        setField("history_name", "");
        setField("history_date", "");
    }

    return (
        <>
           <form>
              <input name="history_type" value={values.history_type}/>
              <input name="history_name" value={values.history_name}/>
              <input name="history_date" value={values.history_date}/>
              <myToggleButton onToggle={clearAll}/>
           </form>
        </>
    )
}

../parent中的某个地方
const[history，setHistory]=useState（{类型：“古代”，历史：“世界”，日期：“2020-01-22”}）
const[editMode，setEditMode]=useState（false）；
返回(
{setEditMode（！editMode）}
{editMode&&}
);
//使用此组件并传入历史记录
常量MyReactComponent=（{history}）=>{
const myInitialValues={history\u type:history.type，history\u name:history.history，history\u date:history.date}
常量myFormik=useFormik（{initialValues:myInitialValues}）
const{values，setField}=myFormik；
常量clearAll=（）=>{
设置字段（“历史类型”，“类型”）；
设置字段（“历史名称”）；
设置字段（“历史记录和日期”）；
}
返回(
)
}

此应用程序的上下文（背景）是当我单击它时有一个项目列表，

history

上下文变量得到更新，

editMode

通过按钮更改

此代码的问题是，每当我单击

切换按钮时，它根本不会清除输入字段。我不知道这是否是问题所在，但我猜（在控制台记录了无数次之后）当我点击切换按钮时，
MyReactComponent
中的代码被多次调用，所以它重置了字段？我不知道这是不是原因

如果必须从react
上下文
变量中读取
Formik
表单，我们应该如何正确初始化它？这个问题的解决方案是什么