Why is it that I still need to double click the item button for it to change color in material ui and next js?

Question

I am currently working with Material UI and Next.js in my project. I have encountered an issue where I need to double-click the item button to change the color. Despite the logic for changing the color appearing correct, the button does not update on a single click as expected, which suggests there might be an underlying issue with how the state or event handling is managed in the implementation.

export default function SideBar() {
  const theme = useTheme();
  const router = useRouter();
  const [open, setOpen] = React.useState(true);
  const path = getPath();
  const [selectedIndex, setSelectedIndex] = React.useState();
  const [changeColor, setChangeColor] = React.useState();

  const handleDrawerOpen = () => {
    setOpen(true);
  };

  const handleDrawerClose = () => {
    setOpen(false);
  };

  const handleNavigation = (path, id) => {
    setSelectedIndex(id);
    router.push(path);
    console.log(id);
  };

  return (
    <Box sx={{ display: "flex" }}>
      <CssBaseline />
      <AppBar position="fixed" open={open}>
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            onClick={handleDrawerOpen}
            edge="start"
            sx={{
              marginRight: 5,
              ...(open && { display: "none" }),
            }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" noWrap component="div">
            Mini variant drawer
          </Typography>
        </Toolbar>
      </AppBar>
      <Drawer variant="permanent" open={open}>
        <DrawerHeader>
          <img src="/logo-wordmark-white.png" alt="logo" width="180" />
          <IconButton onClick={handleDrawerClose}>
            {theme.direction === "rtl" ? (
              <ChevronRightIcon />
            ) : (
              <ChevronLeftIcon />
            )}
          </IconButton>
        </DrawerHeader>
        <Divider />
        <List>
          {path.map((text) => (
            <ListItem key={text.id} disablePadding sx={{ display: "block" }}>
              <ListItemButton
                sx={{
                  minHeight: 48,
                  justifyContent: open ? "initial" : "center",
                  px: 2.5,
                  backgroundColor: selectedIndex == text.id ? "black" : "white",
                }}
                onClick={() => handleNavigation(text.path, text.id)}
              >
                <ListItemIcon
                  sx={{
                    minWidth: 0,
                    mr: open ? 3 : "auto",
                    justifyContent: "center",
                  }}
                >
                  {text.img}
                </ListItemIcon>
                <ListItemText
                  primary={text.label}
                  sx={{ opacity: open ? 1 : 0 }}
                />
              </ListItemButton>
            </ListItem>
          ))}
        </List>
      </Drawer>
      <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
        <DrawerHeader />
      </Box>
    </Box>
  );
}

I have experimented with various methods and approaches to resolve the issue, but unfortunately, none of the solutions I tried have worked so far. Despite my efforts to find a suitable fix, the problem persists, and I have not been able to identify a successful resolution