menu item is not closing on my first click

Question

`

 <Menu
                  sx={{ mt: '45px' }}
                  id="menu-job"
                  anchorEl={openDesktop}
                  anchorOrigin={{
                    vertical: 'top',
                    horizontal: 'right',
                  }}
                  keepMounted
                  transformOrigin={{
                    vertical: 'top',
                    horizontal: 'right',
                  }}
                  open={Boolean(openDesktop)}
                  onClose={handleCloseDesktopMenu}
                  onClick={handleCloseDesktopMenu}
                >
                  {dropdowns.map((dropdown) => (
                    <MenuItem
                      key={dropdown.title}
                      onClick={(e) => {
                        e.stopPropagation()
                        handleCloseDesktopMenu()
                        navigate(dropdown.path)
                      }}
                    >
                      <Typography textAlign="left">
                        <img
                          src={dropdown.icon}
                          className="me-2"
                          alt="not found"
                        />
                        {dropdown.title}dfsd
                      </Typography>
                    </MenuItem>
                  ))}
                </Menu>

menu item is not closing when i click on first time when i remove onclick from it works fine but when i use onClick and with navigate it is not closing menu for the first time only.