I am trying to persist Page onMouseEnter in Menu in react,

Question

I am working on a Menu Project, and I want the sub-menu component to display when i hover on a menu item, and it should persist when the mouse enters the submenu component page.

const [subVisibility, setSubVisibility] = useState(false)
return (
    <Grid
      container
      spacing={1}
      sx={{ position: 'absolute', top: 0, zIndex: 10 }}
    >
        <Grid item xs={2} sm={2} md={3} lg={3}>
          <>
            <Paper>
              <MenuList sx={{ overflow: 'auto', maxHeight: '70vh' }}>
                <Box
                  sx={{
                    background: '#E9F2E4',
                    display: 'flex',
                    padding: 2,
                    alignItems: 'center',
                    cursor: 'pointer',
                  }}
                  onClick={() => window.open('/all-categories', '_blank')}
                >
                  <MenuIcon sx={{ color: '#7AB259' }} />
                  <Typography
                    variant='h6'
                    sx={{
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'space-between',
                      color: '#7AB259',
                      pl: 2,
                    }}
                  >
                    ALL CATEGORIES
                  </Typography>
                </Box>
                <Divider />
                {categories &&
                  categories.map((category) => (
                    <>
                      <MenuItem
                        key={category._id}
                        sx={{ pl: 5 }}
                        onMouseEnter={() => setSubVisibility(true)}
                        onMouseLeave={() => setSubVisibility(false)}
                      >
                        <Typography variant='subtitle2'>
                          {category.name}
                        </Typography>
                      </MenuItem>
                      <Divider />
                    </>
                  ))}
              </MenuList>
            </Paper>
          </>
        </Grid>
    </Grid>
  )
}  

I am using onMouseEnter and onMouseLeave. The problem is that i am unable to move my cursor into the submenu because the submenu disappears.

This is the submenu that should display when I hover on a menu item

{subVisibility && (
            <Grid item xs={12} md={9} lg={9}>
              <div style={{ background: '#fff', height: '50vh', padding: 20 }}>
                <Typography
                  variant='h6'
                  sx={{ borderBottom: '1px solid #fff', py: 2 }}
                >
                  Fruits
                </Typography>
                <Grid container rowSpacing={2}>
                  <Grid item xs={3}>
                    <Typography variant='body2'>Mangoes</Typography>
                  </Grid>
                  <Grid item xs={3}>
                    <Typography variant='body2'>Oranges</Typography>
                  </Grid>
                  <Grid item xs={3}>
                    <Typography variant='body2'>Water Melon</Typography>
                  </Grid>
                  <Grid item xs={3}>
                    <Typography variant='body2'>Paw Paw</Typography>
                  </Grid>
                  <Grid item xs={3}>
                    <Typography variant='body2'>Guava</Typography>
                  </Grid>
                  <Grid item xs={3}>
                    <Typography variant='body2'>Bananas</Typography>
                  </Grid>
                  <Grid item xs={3}>
                    <Typography variant='body2'>Cherry</Typography>
                  </Grid>
                </Grid>
              </div>
            </Grid>
          )}