MUI Autocomplete结合React Hook Form首次选中选项无显示且返回null的问题求助

我刚接触ReactJS和MUI，现在在项目里用MUI的Autocomplete组件展示国家列表，数据是通过country-state-city这个npm包获取的。

组件能正常渲染所有国家选项，但选中某个国家时遇到了奇怪的问题：第一次点击选项，输入框里不会显示对应的国家名称，控制台还会输出null；第二次点击同一个选项，才能把option.name显示到Autocomplete的输入框里。这到底是怎么回事啊？

另外我还结合了React Hook Form的Controller组件，因为需要把选中的国家名称提交给API服务器。

我是这样获取国家数据的：

const countries = require('country-state-city').getAllCountries();

getAllCountries()是这个包自带的获取所有国家数据的方法。

以下是我的代码：

<Controller
  control={control}
  defaultValue={''} // 国家字段默认值为空字符串
  name={'country'} // 字段名是字符串类型
  rules={{
    required: 'please select a country'
  }}
  render={({ field, fieldState }) => (
    <Autocomplete
      {...field}
      // 其他属性比如open、onOpen、onClose等
      onChange={(event, option : any, reason : string) => {
        if (reason === 'selectOption' && option !== null && option.name !== '') {
          field.onChange(option.name);
          console.log(field.value, 'is registered');
          return option.name;
        } else if (reason === 'clear') {
          field.onChange(null);
          console.log('textfield- cleared');
        }
      }}
      clearOnBlur={false}
      value={field.value}
      options={countries}
      freeSolo={true}
      isOptionEqualToValue={(option : any, value) => option.name === value.name}
      getOptionLabel={(option : any) => option.name ? option.name : ''}
      renderInput={(params) => (
        <TextField
          {...params}
          className={'inputField'}
          label={'Employee location'}
          InputProps={{
            ...params.InputProps,
            sx: { fontSize: '14px' }
          }}
          error={!!fieldState.error}
          helperText={fieldState.error?.message}
        />
      )}
    />
  )}
/>

这里Controller的name字段需要接收的是字符串类型的国家名称。之所以用option.name，是因为country-state-city返回的国家对象里包含name属性，其他属性还有currency、isoCode、flag、latitude、longitude等。

备注：内容来源于stack exchange，提问作者Himanshu Sharma