Autocomplete hover not responding properly - reactjs

Question

I have created an Autocomplete component that rely on the selected value of the parent Autocomplete.
This working perfectly. When I type or hover in order to select then, both are working as expected.
const [hoverd, setHoverd] = useState(false);
const onMouseOver = () => setHoverd(true);
const onMouseOut = () => setHoverd(false);
<div onMouseOver={onMouseOver} onMouseOut={onMouseOut}>
<Card className={classes.paper} raised={hoverd}>
<Grid item>
<Autocomplete
id="filter-by"
className={classes.search}
options={filterBy}
value={filterByValue}
onChange={(event, newValue) => {
setFilterByValue(newValue)
}}
renderInput={(params) =>
<TextField {...params}
variant="outlined"
label="Search by: ?"
InputProps={{
...params.InputProps,
}}
/>}
/>
</Grid>
{filterByValue === 'Campaign' ? <Grid item>
<Autocomplete
id="filter-by-campaign"
className={classes.search}
options={campaignData}
getOptionLabel={(option) => option.campaign}
renderInput={(params) =>
<TextField {...params}
variant="outlined"
label="Search by: campaign"
/>}
/>
</Grid> : <div />}
When I am moving the code to a separate component then its not working. I can type but the hover option not working.
{filterByValue === 'Campaign' ? <FilterByCampaign /> : <div />}
const FilterByCampaign = () => {
return <Grid item>
<Autocomplete
id="filter-by-campaign"
className={classes.search}
options={campaignData}
getOptionLabel={(option) => option.campaign}
renderInput={(params) =>
<TextField {...params}
variant="outlined"
label="Search by: campaign"
/>}
/>
</Grid>
}
I don’t understand what is the different between this two.
Any idea ?
Thank you

Answer 1

Try passing your onMouseOver function to the child component as a prop and then to the input
{filterByValue === 'Campaign' ? <FilterByCampaign onMouseOver={onMouseOver} /> : <div />}
const FilterByCampaign = ({ onMouseOver }) => {
return <Grid item>
<Autocomplete
id="filter-by-campaign"
className={classes.search}
options={campaignData}
getOptionLabel={(option) => option.campaign}
onMouseOver={onMouseOver} // depending on what the onMouseOver does either here
renderInput={(params) =>
<TextField
{...params}
onMouseOver={onMouseOver} // or here
variant="outlined"
label="Search by: campaign"
/>}
/>
</Grid>
}