I've currently implemented a means of setting my Formik initial values from an API call which is all working fine but I'm currently facing an issue with re-populating my react-select field from my initial values.

At the moment, my initial values (snippet) from API fetch call looks like this:

const emptyGroup = {
       groupName: "",
       groupValues: []
}

const INITIAL_FORM_STATE = {
  myName: '',
  allGroups: [emptyGroup]
};

"allGroups": [
    {
      "groupName": "Group Astro",
      "groupValues": [
           {
             "value": "My Group A",
             "label": "My Group A"
           },
           {
             "value": "My Group B",
             "label": "My Group B"
           }
      ]
    }
]

Below is my react-select component:

<ReactSelect
   options={ myGroupOptions }   
   isMulti={true}
   name={`allGroups.${index}.groupValues`}
   onChange={(option) => formikProps.setFieldValue({`allGroups.${index}.groupValues`}, option.value)}
   onBlur={formikProps.handleBlur}
   value={ ????? }
 />

What I am unsure is, how do I feed the values from the groupValues array above back into value={ ?????? } so that when this <ReactSelect /> component is rendered, it displays the values: My Group A My Group B within it?