I have created a React component that allows the user to filter a list by typing into an input, I have simplified the component into the below:

const value = filteredOptions
   .filter((option) => option.selected)
   .map((option) => option.label)
   .join(",");

const [input, setInput] = useState(value);

const handleSearch = (e) => {
   e.preventDefault();
   setInput(e.target.value);
};

return (
<InputSearch 
   value={input}
   onChange={handleSearch}
/>
<SelectOption
   key={option.code}
   option={option}
   onClick={onValueChange}
/>

);

value is null by default (and is populated with a string value when selected) - this works. what I would like to do however is feed the value into my input state so that the input state can be updated either by typing into the input (which works currently) or by selecting a value.