'Sidebar NavLink is not steady when click react js

I am currently facing some problem about sidebar navigation. Every time I click the menu below the scrollbar went go to top again. I want it to steady like when I click the bottom menu it will stays its current view. Kindly check file below. Hope you can help me. or suggest another ways to redirect pages from sidebar Thanks.

            {nav.nav &&
              nav.nav.map((sub, subIndex) => (
                <ListItem
                  key={subIndex}
                  button
                  component={NavLink}
                  to={sub.link}
                  end={true}
                >
                  <ListItemIcon sx={{ minWidth: "40px" }}>
                    {sub.icon}
                  </ListItemIcon>
                  <ListItemText
                    primary={sub.name}
                    primaryTypographyProps={{
                      variant: "body2",
                    }}
                  />
                </ListItem>
              ))}

video gif



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source