Chakra中的FormControl的范围只是提供一些上下文，通过isDisabled，isInvalid等（https://chakra-ui.com/docs/components/form-control/props）帮助表单元素的样式化。
至于表单管理，您应该使用单独的库，如react-hook-form
使用react-hook-form，您只需将表单数据直接register到Chakra表单元素组件上，例如Input，而不是FormControl

const {
  register,
} = useForm({
   defaultValues: {
      name: 'Joe Bloggs'
   }
})

...
<Input {...register('name')} />

字符串
如果你是基于API设置默认值，我建议你在父组件中获取数据，只有当你有数据并通过props传递它时才呈现包含表单的组件，因为defaultValues只在表单的第一次呈现时设置。
例如，使用react-query

function Parent(){
   const { data, isLoading, isError } = useQuery(...)

   if(isLoading) return <Loading />
   if(isError) return <Error />
   
   return <MyForm defaultValue={data}/>
}

function MyForm({ defaultValue }){
   const {
      register,
   } = useForm({
      defaultValues: defaultValue // { name: 'Joe Bloggs' }
   })

   ...
   <Input {...register('name')} /> // <-- value = 'Joe Bloggs'
}

型