title: Typescript Equality issue on Material UI Autocomplete
body: <p>Data is stored as:</p>
  
  <pre><code> { iso: "gb", label: "United Kingdom", country: "United Kingdom" },
   { iso: "fr", label: "France", country: "France" }
  </code></pre>
  
  <p>Value passed to the Autocomplete is:</p>
  
  <pre><code>{ iso: "gb", label: "United Kingdom", country: "United Kingdom" }
  </code></pre>
  
  <p>Error reported in console</p>
  
  <blockquote>
    <p>Material-UI: the value provided to Autocomplete is invalid.
    None of the options match with <code>{"label":"United Kingdom","iso":"gb","country":"United Kingdom"}</code>.</p>
  </blockquote>
  
  <p>Type error reported on <code>value={}</code></p>
  
  <blockquote>
    <p>Type 'string | ICountry' is not assignable to type 'ICountry | ICountry[] | null | undefined'.
      Type 'string' is not assignable to type 'ICountry | ICountry[] | null | undefined'.</p>
  </blockquote>
  
  <p>Issue: Passing in data to the component doesn't set it to the corresponding option, I'm all out of ideas on how to resolve this issue.</p>
  
  <p>Codesandbox of issue:
  <a href="https://codesandbox.io/s/charming-firefly-zl3qd?file=/src/App.tsx" rel="noreferrer">https://codesandbox.io/s/charming-firefly-zl3qd?file=/src/App.tsx</a></p>
  
  <pre><code>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) =&gt; {
    if (isoCode) {
      return typeof String.fromCodePoint !== "undefined"
        ? isoCode
            .toUpperCase()
            .replace(/./g, char =&gt;
              String.fromCodePoint(char.charCodeAt(0) + 127397)
            )
        : isoCode;
    }
    return "";
  };
  
  const App: React.FC = () =&gt; {
    const investor = investors.find(element =&gt; element.id === "123");
  
  
    return (
      &lt;div className="App"&gt;
        &lt;Formik
          initialValues={{
            address: {
              country: investor?.legal.address.country ? investor.legal.address.country : '',
            }
          }}
          onSubmit={(values, actions) =&gt; {
            console.log({ values, actions });
            actions.setSubmitting(false);
          }}
        &gt;
          {({ submitForm, isSubmitting, values, setFieldValue, setValues }) =&gt; {
  
            return (
              &lt;form&gt;
  
                &lt;Autocomplete
                  id="country"
                  options={countries}
                  getOptionLabel={option =&gt; option.label}
                  value={values.address.country}
                  renderOption={(option: ICountry) =&gt; (
                    &lt;Box display="flex" flexDirection="row" alignItems="center"&gt;
                      &lt;Box mr={1}&gt;{isoToFlag(option.iso)}&lt;/Box&gt;
                      &lt;Box&gt;
                        &lt;Typography variant="body2"&gt;{option.label}&lt;/Typography&gt;
                      &lt;/Box&gt;
                    &lt;/Box&gt;
                  )}
                  onChange={(e: object, value: any | null) =&gt; {
                    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 =&gt; (
                    &lt;TextField
                      {...params}
                      name="address.country"
                      label="Country"
                      variant="outlined"
                      fullWidth
                    /&gt;
                  )}
                /&gt;
                &lt;Button
                  variant="contained"
                  size="large"
                  color="primary"
                  disabled={isSubmitting}
                  onClick={submitForm}
                &gt;
                  Submit
                &lt;/Button&gt;
              &lt;/form&gt;
            );
          }}
        &lt;/Formik&gt;
      &lt;/div&gt;
    );
  };
  
  export default App;
  </code></pre>
  
  <p><strong>countries.ts</strong></p>
  
  <pre><code>
  import { ICountry } from "./investor";
  
  export const countries: ICountry[] = [
    {
      iso: "gb",
      label: "United Kingdom",
      country: "United Kingdom"
    },
    {
      iso: "fr",
      label: "France",
      country: "France"
    }
  ];
  </code></pre>