I am using react-select and I am trying to set my value prop to pre-existing value for that record.

I am retrieving the data from a postgres db and it is be returned as follows:

"{value:2,label:'Dog'},{value:4,label:'Cat'}"

What I am then attempting to do is push this to an array as follows:

let data = "{value:2,label:'Dog'},{value:4,label:'Cat'}"
let selectValues = []
selectValues.push(data)
console.log(selectValues)

The console log for selectValues array returns the following result when expanding the array in dev tool's console:

0: "{value:2,label:'Dog'},{value:4,label:'Cat'}"

When I then attempt to assign this array to my react-select component value below, the initial values are not being displayed.

The thing is though, if I hardcode the array object as shown against the commented out line, for value, it works.

Not sure what I am missing with my approach above with pushing the string object to my selectValues array.

<Select 
  name="my-select"
  styles={customStyles}
  options={options}
  isMulti={true}
  value={selectValues}
  // value={[{value:2,label:'Dog'},{value:4,label:'Cat'}]}
  placeholder={'Options....'}
/>