reactjs Css visibility on list map not working

Question

I'm trying to show the icon when the button element has hovered over. But It only works on the first button item but not on others but when the first item hovered it works as expected. I've also tried display property it works very well but visibility is not working. like expected.

code:

<Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
          {pages?.map((page, index) => (
            <Link href={`${page.url}`} key={page.title}>
              <Button
                key={page.title}
                size="small"
                onClick={handleCloseNavMenu}
                sx={{
                  mx: 2,
                  my: 2,
                  fontSize: "1.125rem",
                  color: "text.secondary",
                  textTransform: "capitalize",
                  "&:hover": {
                    color: "white",
                  },
                  "&:hover .MuiSvgIcon-root": {
                    visibility: "visible",
                  },
                  "& .active": {
                    color: "white",
                  },
                  "& .active .MuiSvgIcon-root": {
                    visibility: "visible",
                  },
                }}
                className={isActive(page.url) ? "active" : ""}
               
              
              >
                <TextLogo
                  fontSize="small"
                  sx={{ verticalAlign: "sub", visibility: "hidden" }}
                />
                {`${page.title}`}
              </Button>
            </Link>
          ))}
        </Box>

Here is pages array code:

  const pages = [
    { title: "Marketplace", url: "#" },
    { title: "News", url: "/news" },
    { title: "Drops", url: "/drops" },
    { title: "Feed", url: "#" },
  ];