Setting initial selected values for Autocomplete as a controlled component

Question

What's happening is on page load, the: form.values.statistics?.ethnicity generates the Chips fine but doesn't set the selected values in the Autocomplete component.

Like in the image below, the Caucasian appears to be not selected when it should be selected from the Autocomplete component

What I've thought of and tried so far in which data.data.attributes.statistics.ethnicity === form.values.statistics.ethnicity:

1. Maybe I'm missing the "name" property from the Autocomplete component - tried adding so, but I can't. It says the property doesn't exist for the component. Which is weird?
2. value={ethnicityOptions[arrayOfSelectedIds]} or value={ethnicityOptions[data.data.attributes.statistics.ethnicity]}

Autocomplete code:

<Autocomplete
 multiple
 options={ethnicityOptions}
 getOptionLabel={(ethnicityOptions) => ethnicityOptions.name}
 id="multiple-tags"
 value={form.values.statistics?.ethnicity}
 onChange={(e, newValue) => {
    form.setFieldValue('statistics.ethnicity', newValue);
    form.handleChange(e);
 }}
 renderTags={() => null}
 renderInput={(params) => (
   <Grid className={classes.autoCompleteGrid}>
     <TextField
       {...params}
        variant="outlined"
        onChange={form.handleChange}
        placeholder="Ethnicities"
      />
   </Grid>
 )}
/>

Code for generating Chips:

{form.values.statistics?.ethnicity
   ? form.values.statistics?.ethnicity?.map((v) => (
     <Chip
       key={v.name}
       label={v.name}
       onDelete={() => {
         onEthnicityChipDelete(v);
       }}
     />
   ))
 : ''}

I'm currently stuck on this and I might be just missing something. Any help to breakthrough would be really appreciated!