Active class for react-scroll, isn't working properly

Question

Active class not being shown, nor rendered in DOM when I run my page and scroll to the <Element></Element>

I read somewhere that you had to call scrollSpy.update() that was posted a few years ago. However, still not working.

I'm following the Docs implementation

Here is my code...

import React, { useEffect } from "react";
import { makeStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import styles from "./navbar.module.css";
import { Link, Element } from "react-scroll";
import * as Scroll from "react-scroll";

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  menuButton: {
    marginRight: theme.spacing(2)
  },
  title: {
    flexGrow: 1
  }
}));

export default function ButtonAppBar(props) {
  let scrollSpy = Scroll.scrollSpy;
  const classes = useStyles();

  useEffect(() => {
    scrollSpy.update();
  });

  return (
    <div className={classes.root}>
      <AppBar style={{ backgroundColor: "#343567" }} position="fixed">
        <Toolbar>
          <Typography variant="h6" className={classes.title}>
            Welcome
          </Typography>
          <Link
            activeClass="active"
            to="test1"
            spy={true}
            smooth={true}
            offset={-70}
            duration={800}
          >
            Test 1
          </Link>
          <Link
            activeClass="active"
            to="test2"
            spy={true}
            smooth={true}
            offset={-70}
            duration={800}
          >
            Test 2
          </Link>
          <Link
            activeClass="active"
            to="test3"
            spy={true}
            smooth={true}
            offset={-70}
            duration={800}
          >
            Test 3
          </Link>
          <Link
            activeClass="active"
            to="test4"
            spy={true}
            smooth={true}
            offset={-70}
            duration={800}
          >
            Test 4
          </Link>
        </Toolbar>
      </AppBar>
    </div>
  );
}

Here is the element that it is scrolling to for ease-of-access.

<Element name="test1" className="element">
  test 1
</Element>

<Element name="test2" className="element">
  test 2
</Element>

<Element name="test3" className="element">
  test 1
</Element>

<Element name="test4" className="element">
  test 2
</Element>

Answer 1

I think, You forget this.

import { Link, Element } from "react-scroll";

Hope is help.

Answer 2

You need to set the Element to 'id' instead of 'name'

For example:

<Element id="test1" className="element">
  test 1
</Element>

<Element id="test2" className="element">
  test 2
</Element>

<Element id="test3" className="element">
  test 1
</Element>

<Element id="test4" className="element">
  test 2
</Element>