Hover Effect in React is too slow (state update for hover effects)

I am trying to change the background color of a list item in case the user is hovering on top of it. But when the list size grows the hover effect becomes too slow and gives a feel as though the site is lagging.

I am using the Tree View component of material UI and jss for styling

important pieces of code

use states

   const [hoverElementId, setHoverElementId] = useState("");

important functions

 const handleTreeItemMouseHover = (event, label, nodeId) => {
        let hoverKey = generateKey(nodeId, label);
        setHoverElementId(hoverKey);
    }

    const handleRegionSelectUnselect = (value, selectedKey, selected) => {
        let selectedRegions = { ...selectedRegionsLocalState };

        if (selected === true) {
            selectedRegions[selectedKey] = value;
        }
        else {
            delete selectedRegions[selectedKey];
        }

        setSelectedRegionsLocalState(selectedRegions);
    }

const generateKey = (nodeId, name) => {
        return String(nodeId) + "-" + String(name);
    }
const getTreeItemLabel = (labelText, labelData) => {
        let selectedKey = generateKey(labelData.nodeId, labelText);
        let isItemSelected = selectedRegionsLocalState[selectedKey];
        let isItemHovered = selectedKey === hoverElementId
        return (
            <Grid
                onMouseOver={(event) => {
                    handleTreeItemMouseHover(
                        event,
                        labelData.name,
                        labelData.nodeId
                    )
                }}
                style={
                    isItemHovered ? { backgroundColor: "grey" }
                        :
                        isItemSelected ? { backgroundColor: "red" }
                            : {}
                }
                container justify="space-between" >
                <Grid item className={classes.treeItemLabelText}>{labelText}</Grid>
                <Grid item
                    className={classes.selectUnSelectText}
                    onClick={(event) => {
                        handleRegionSelectUnselect(
                            labelData,
                            selectedKey,
                            //toggle value in case selected -> deselect item and vice versa
                            isItemSelected ? false : true
                        )
                        event.preventDefault();
                    }}>
                    {
                        isItemHovered ?
                            (
                                isItemSelected ?
                                    Constants.ClickToDeselectRegion :
                                    Constants.ClickToSelectRegion
                            )
                            :
                            ""
                    }
                </Grid>
            </Grid >
        )
    }

this is what I am trying to achieve on hover change color and show text for select or deselecting item

this is the example of lagging that I was talking about

cursor might not be visible but it is on Arlington while I was going up from the bay city

the whole code snippet in case you wish to refer

note: it won't work as I have not added redux here that would just complicate that small sample in case it is required let me know

link:Tree view hover

In case react state update is not the way for this please suggest any other way for this