Not render select value in react-select - reactjs

Question

I have created 3 conditional lists with react-select but the third element cannot render the selected value, I am trying to update it even with useEffect but I don't know if it is correct.
Example of my code:
import React, { useState, useEffect } from "react";
import Select from "react-select";
import data from "../data.json";
const Dropdowns = ()=>{
const [product, setProduct] = useState(null);
const [type, setType] = useState(null);
const [typesList, setTypesList] = useState(null);
const [title, setTitle] = useState(null);
const [titlesList, setTitlesList] = useState(null);
// handle change event of the product dropdown
const handleProductChange = (obj) => {
setProduct(obj);
setTypesList(obj.types)
setType(null);
};
// handle change event of the types dropdown
const handleTypesChange = (obj) => {
setType(obj);
setTitlesList(obj.titles);
};
// handle change event of the titles dropdown
const handleTitlesChange = (obj) => {
setTitle(obj);
};
useEffect( () => {
if ( title ) {
setTitle(title)
}
}, [title])
return (
<>
<br />
<h3>Products</h3>
<Select
placeholder="Select Product"
value={ product }
options={ data }
onChange={ handleProductChange }
getOptionLabel={ (x) => x.product }
/>
<br />
<h3>Types</h3>
<Select
placeholder="Select Types"
value={ type }
options={ typesList }
onChange={ handleTypesChange }
getOptionLabel={ (x) => x.type }
/>
<br />
<h3>Titles</h3>
<Select
placeholder="Select Title"
value={ title }
options={ titlesList }
onChange={ handleTitlesChange }
getOptionLabel={ (x) => x }
/>
</>
)
}
export default Dropdowns;
Thank you very much for your help!