Los datos se almacenan como:

 { iso: "gb", label: "United Kingdom", country: "United Kingdom" }, { iso: "fr", label: "France", country: "France" }

El valor pasado a Autocompletar es:

 { iso: "gb", label: "United Kingdom", country: "United Kingdom" }

Error informado en la consola

Material-UI: el valor proporcionado para Autocompletar no es válido. Ninguna de las opciones coincide con {"label":"United Kingdom","iso":"gb","country":"United Kingdom"} .

Error de tipo informado en value={}

Escriba 'cadena | IPaís' no se puede asignar al tipo 'IPaís | IPaís[] | nulo | indefinido'. El tipo 'cadena' no se puede asignar al tipo 'ICountry | IPaís[] | nulo | indefinido'.

Problema: pasar datos al componente no lo establece en la opción correspondiente, no tengo ideas sobre cómo resolver este problema.

Códigos y caja de emisión: https://codesandbox.io/s/charming-firefly-zl3qd?file=/src/App.tsx

 import * as React from "react"; import { Box, Typography, TextField, Button } from "@material-ui/core"; import { Autocomplete } from "@material-ui/lab"; import "./styles.css"; import { countries } from "./countries"; import { investors } from "./investor"; import { Formik } from "formik"; interface ICountry { iso: string; country: string; label: string; } const isoToFlag = (isoCode: string) => { if (isoCode) { return typeof String.fromCodePoint !== "undefined" ? isoCode .toUpperCase() .replace(/./g, char => String.fromCodePoint(char.charCodeAt(0) + 127397) ) : isoCode; } return ""; }; const App: React.FC = () => { const investor = investors.find(element => element.id === "123"); return ( <div className="App"> <Formik initialValues={{ address: { country: investor?.legal.address.country ? investor.legal.address.country : '', } }} onSubmit={(values, actions) => { console.log({ values, actions }); actions.setSubmitting(false); }} > {({ submitForm, isSubmitting, values, setFieldValue, setValues }) => { return ( <form> <Autocomplete id="country" options={countries} getOptionLabel={option => option.label} value={values.address.country} renderOption={(option: ICountry) => ( <Box display="flex" flexDirection="row" alignItems="center"> <Box mr={1}>{isoToFlag(option.iso)}</Box> <Box> <Typography variant="body2">{option.label}</Typography> </Box> </Box> )} onChange={(e: object, value: any | null) => { console.log('do the types match?', typeof value === typeof values.address.country); console.log('do the objects match?', value === values.address.country); console.log('the objects in question', value, values.address.country); console.log(" "); setFieldValue("address.country", value); }} renderInput={params => ( <TextField {...params} name="address.country" label="Country" variant="outlined" fullWidth /> )} /> <Button variant="contained" size="large" color="primary" disabled={isSubmitting} onClick={submitForm} > Submit </Button> </form> ); }} </Formik> </div> ); }; export default App;

países.ts

 import { ICountry } from "./investor"; export const countries: ICountry[] = [ { iso: "gb", label: "United Kingdom", country: "United Kingdom" }, { iso: "fr", label: "France", country: "France" } ];