React-select not displaying input when modifying value prop using state hooks - reactjs

Question

Ive been trying to make a dynamic input field(more input options appear on user input) with react-select, the input gets displayed when I'm not modifying value prop using state variables, but when I modify value prop using state hooks it is not displaying anything.
Here is the code snippet for without hooks which displays output just fine
import React,{useState} from "react"
import CreatableSelect from 'react-select/creatable';
export default function DynamicInput(){
const [val,setVal] = useState([])
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
]
const handleAdd=()=>{
const tempVal = [...val,[]]
setVal(tempVal)
}
const handleDel=(indx)=>{
const deleteVal = [...val]
deleteVal.splice(indx,1);
setVal(deleteVal);
}
return (
<div>
<button onClick={()=>handleAdd()}>Add</button>
{val.map((data,indx)=>{
return(
<div key = {indx}>
<CreatableSelect isClearable options={options} placeholder="Placeholder" } />
<button onClick = {()=>handleDel(indx)}>X</button>
</div>
)
})
}
</div>
);
}
Now I tried to use hooks to handle the input hooks.
import React, { useState } from "react";
import CreatableSelect from "react-select/creatable";
export function DynamicInputwHooks() {
const [val, setVal] = useState([]);
const [selectedOp, setSelectedOp] = useState([]);
const options = [
{ value: "chocolate", label: "Chocolate" },
{ value: "strawberry", label: "Strawberry" },
{ value: "vanilla", label: "Vanilla" }
];
const handleAdd = () => {
const tempVal = [...val, []];
const tempSel = [...selectedOp, []];
setSelectedOp(tempSel);
setVal(tempVal);
};
const handleSelection = (v, indx) => {
const tempSel = [...selectedOp];
tempSel[indx] = v.value;
setSelectedOp(tempSel);
};
const handleDel = (indx) => {
const deleteVal = [...val];
const deletesel = [...selectedOp];
deleteVal.splice(indx, 1);
deletesel.splice(indx, 1);
setVal(deleteVal);
setSelectedOp(deletesel);
};
return (
<div>
<button onClick={() => handleAdd()}>Add</button>
{val.map((data, indx) => {
return (
<div key={indx}>
<CreatableSelect
isClearable
options={options}
placeholder={"Placeholder"}
value={selectedOp[indx]}
onChange={(e) => handleSelection(e, indx)}
/>
<button onClick={() => handleDel(indx)}>X</button>
</div>
);
})}
</div>
);
}
I also added an input box with the same value and it displays value accordingly.
(I am unable to embed code using sandbox but this is the link : https://codesandbox.io/s/frosty-darwin-s3ztee?file=/src/App.js)
Upon using inspect element I found that when not using handling value there is an additional div as compared to when modifying value.
When not handling value prop
The single value div
when handling value prop
No single value div gets created
I cannot use useRef as there can be multiple inputs.
any help how to solve this would be appreciated thanks.

Answer 1

Ok so after some more searching I found this sandbox example that helps solve the problem
https://codesandbox.io/s/react-select-set-value-example-d21pt?file=/src/App.js
while this works for react-select but using it for react-select creatable requires appending to the options based on isNew prop of input when creating a new option.