React css hover propriety "Glitching" after changing language and html "dir"

Question

sorry for this stupid question ! but i'm stuck here without any solution !

I'm working with React,MaterialUI and i18n

My Component :

export default function MainMenuItems() {



    const {t} = useTranslation();
    const navigate = useNavigate();
    const styles = {
        textTransform : "uppercase",
        fontWeight : 900,
        fontSize : "inherit"
    }


    return(
        <Grid container item xs={12} justifyContent="flex-start"  sx={{height : "100%", paddingLeft : 8}} >
            <Stack   direction="row" spacing={2}>

                {
                    menuRoutes.map((item) => {
                        if(item.main) {
                            return (
                                <Grid
                                    key={nanoid()}
                                    sx={{
                                        padding : 1,
                                        color : "primary.main",
                                        cursor : "pointer",
                                        height : "100%",
                                        "&:hover" : {
                                            height : "100%",
                                            backgroundColor : "primary.light",
                                            color : "white"
                                        },

                                    }}
                                    justifyContent="center"
                                    justifyItems="center"

                                    onClick={() => navigate(item.path)}
                                >
                                  {/*<ButtonBase sx={{fontFamily : "cairo",fontWeight:  900}}>{t(item.name)}</ButtonBase>*/}
                                  <Typography>{t(item.name)}</Typography>
                                </Grid>
                            )
                        } else {
                            return "";
                        }
                    })
                }



            </Stack>
        </Grid>
    )
}

the component is very Simple ! rendering some elements with some simple css proprites !

all work fine and render the elements the way i want exactly !

the problem is when changing the language of website !

the css hover styles and the OnClick event stop from working until i scroll down or up or refresh the page !

languages change made using redux reducer

the reducer :

reducers : {
        changeLang : (state,action) => {
            state.current = action.payload;

            if(action.payload === "fr") {
                state.isRtl = false
            } else {
                state.isRtl = true
            }

            localStorage.setItem("lang" , action.payload);
            i18n.changeLanguage(action.payload);

        }
    }

Important : i notice that the css hover and the OnClick event still working but only when hovering the top line of the div