请原谅，我想了解并使用 Formik 实现某些功能。

我有两个选择字段，我想将它们选定的值传递给 formik 值。它们的作用基本上是获取 CountryArray 及其对应的区域。我将它们创建为独立组件的原因是，这样我就可以将它们传递给 Formik 中的 Field 组件。我的国家数组来自 import countries from "../data/c-r"; 。我还使用了 react 中的 useState 。但我知道使用 formik 时，您不再需要管理您的状态，因为 Formik 可以做到这一点。我怎样才能实现这一点。

  const [country, setCountry] = useState("");
  const [region, setRegion] = useState("");

  const CountryComponent = () => (
    <FormControl>
      <InputLabel id="demo-simple-select-label">Country</InputLabel>
      <Select
        labelId="demo-simple-select-label"
        id="demo-simple-select"
        value={country}
        onChange={handleChangeCountry}
      >
        {countries.map(country => (
          <MenuItem value={country} key={country.countryShortCode}>
            {country.countryName}
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  );

  const StateComponent = () => (
    <FormControl>
      <InputLabel id="demo-simple-select-label">Region</InputLabel>
      <Select
        labelId="demo-simple-select-label"
        id="demo-simple-select"
        value={region}
        onChange={handleChangeRegion}
        disabled={!country}
      >
        {country
          ? country.regions.map(region => (
              <MenuItem value={region} key={region.shortCode}>
                {region.name}
              </MenuItem>
            ))
          : []}
      </Select>
    </FormControl>
  );

我做了...

<Field
      type="select"
      placeholder="State"
      name="state"
      as={StateComponent}
      fullWidth
      label="Select State"
    />

   <Field
     type="select"
     placeholder="Country"
     name="country"
     as={CountryComponent}
     fullWidth
     label="Select Country"
   />

问题是我无法在 Formik 值中获取地区和国家的值，我怎样才能做到这一点？

谢谢！