When a user hovers over an element, I want to achieve the following functionality:
document.getElementById("dropdownCategory").disabled = true;
<Tooltip arrow placement="right" title={props.description} >
<FormControl id="dropdownCategory" >
<InputLabel id="demo-simple-select-label" >{props.title} - {props.price}€</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={category[props.id]}
onChange={handleCategory}
name={props.id}
>
{numbers.map(l => (
<MenuItem value={l} key={l}>{l}</MenuItem>
))}
</Select>
</FormControl>
</Tooltip>
This component needs to be disabled when the user hovers over it with their mouse