"Cannot read property 'classList' of null error

Question

I am trying to make a dynamic progress bar in my react project. I have a own js file with my progressbar and the way i am making the elements in the bar marked as finished is by adding a classname "active" to the list element in the progress bar file. This is done with functions declared in the progressbar file (see code). I also have a form with three different pages. The problem is when i go to page two and trying to mark the first part of the bar as finished i get the TypeError: Cannot read property 'classList' of null. I understand that it is because the getElementById is returning undefined but i cant understand why because i declare the Progressbar function at the start of every page in the form. My code:

Progressbar.js:

import React from "react";
import "./Progressbar.css";

export const goForward = (name) => {
  var element = document.getElementById(name);
  element.classList.add("active");
};
export const goBackward = (name) => {
  var element = document.getElementById(name);
  element.classList.remove("active");
};

function Progressbar() {
  return (
    <div>
      <ul className="progressBar">
        <li id="step1">Project</li>
        <li id="step2">Part</li>
        <li id="step3">Profile</li>
      </ul>
    </div>
  );
}

export default Progressbar;

Start of second form page:

import Progressbar from "./Progressbar";
import { goForward, goBackward } from "./Progressbar";
return (
    <>
      <Progressbar />
      {goForward("step1")}