Can't control Downshift selectedItem prop from parent component using controlled props - reactjs

Question

I wrote a reusable autocomplete component using Downshift. The component encapsulates a lot of Relay logic for fetching data from my GraphQL endpoint. I have a use case where the parent component needs to receive the selectedItem, display the name property of the selectedItem, then clear out the selectedItem of the autocomplete (think selecting and displaying multiple tags).
Problem is I can't seem to control the selectedItem of the autocomplete from the parent component. I'm sending down the selectedItem as null to the autocomplete yet the inputValue/selectedItem remains the chosen item.
Sample code with Relay stripped out for simplicity:
https://codesandbox.io/embed/spring-fire-um1xh
Steps to reproduce
Type the word "Item" into the textbox
Click on one of the three results that are displayed
Actual outcome
Title of parent component and inputValue/selectedItem of autocomplete are both set to value of item chosen
Desired Outcome
Title of parent component set to value of item chosen
inputValue/selectedItem of autocomplete cleared out

Answer 1

Try below code. This code needs alot of refactor but it works anyway as desired. So, i just added inputValue props on Downshift as per doc.
----- index.js -------
function App() {
const [title, setTitle] = useState("Select an Item");
const [selectedItem, setSelectedItem] = useState(null);
const [inputValue, setInputValue] = useState(""); //added these two to control input of inputbox
const onItemSelected = selectedItem => {
setTitle(selectedItem.name);
setSelectedItem(null);
setInputValue("") // after selection clear input
};
return (
<div className="App">
<h1>{title}</h1>
<Autocomplete
selectedItem={selectedItem}
inputValue={inputValue} // passed down inputValue and setInputValue
setInputValue={setInputValue}
onItemSelected={onItemSelected}
/>
</div>
);
}
----Autocomplete.js--------
function Autocomplete({ selectedItem, onItemSelected, inputValue, setInputValue }) { // get those props
const [items, setItems] = useState([]);
const onInputValueChanged = e => {
setInputValue(e.currentTarget.value) //change a input on inputchange
const items = data.filter(f => f.name.includes(e.currentTarget.value));
setItems(items);
};
return (
<Downshift
inputValue={inputValue} //added
selectedItem={selectedItem}
onChange={onItemSelected}
itemToString={i => (i ? i.name : "")}
>
{({ getInputProps, getItemProps, getMenuProps, isOpen }) => (
<div>
<input {...getInputProps({ onChange: onInputValueChanged })} />
<ul {...getMenuProps()}>
{isOpen &&
items.map(item => (
<li {...getItemProps({ item, key: item.value })}>
{item.name}
</li>
))}
</ul>
</div>
)}
</Downshift>
);
}