React Scroll and Material-UI button active link does not work

It does go to the correct page, however, how can I make a background effect or change the font color when the link is active? I tried a CSS with this and it does not work.

codesandbox:https://codesandbox.io/s/cocky-sun-xg80c5?file=/src/App.js

.active{
 background-color: 'red';
}



{pages.map((page) => (
                  <Link
                    to={page.link}
                    spy={true}
                    smooth={true}
                    offset={-100}
                    duration={500}
                    activeClass="active"
                    key={page.id}
                  >
                    <Button
                      key={page.id}
                      sx={{
                        my: 2,
                        color: "black",
                        display: "block",
                      }}
                    >
                      {page.title}
                    </Button>
                  </Link>
                ))}

This is my json package:

Why would you wrapp a Button inside a Link Element ? A Link is a semantic Element that links to another part of your page or an external page so I don't see a reason for nesting a button inside a link. So I ended up with something like this and this works fine for me now: