How can I solve Constructor problem in React?

Question

I'm a newbie with React.. I'm trying some tutorials with some e-ecommerce app... but with no result..and I can't fix this error with super(props)...Any ideas how to solve this?And after running npm start, my page is all blank...:

 class App extends Component {
      constructor(props) {
        super(props);
    
        this.state = {
          user: null,
          cart: {},
          products: []
        };
        this.routerRef = React.createRef();
      }
    
      render() {
        return (
          <Context.Provider
            value={{
              ...this.state,
              removeFromCart: this.removeFromCart,
              addToCart: this.addToCart,
              login: this.login,
              addProduct: this.addProduct,
              clearCart: this.clearCart,
              checkout: this.checkout
            }}
          >
            <Router ref={this.routerRef}>
            <div className="App">
              <nav
                className="navbar container"
                role="navigation"
                aria-label="main navigation"
              >
                <div className="navbar-brand">
                  <b className="navbar-item is-size-4 ">ecommerce</b>
                  <label
                    role="button"
                    class="navbar-burger burger"
                    aria-label="menu"
                    aria-expanded="false"
                    data-target="navbarBasicExample"
                    onClick={e => {
                      e.preventDefault();
                      this.setState({ showMenu: !this.state.showMenu });
                    }}
                  >
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                  </label>
                </div>
                </nav>
                <Routes>
                  <Route  path="/" element={<ProductList/>}/>
                  <Route  path="/login" element={<Login/>}/>
                  <Route  path="/cart" element={<Cart/>}/>
                  <Route  path="/add-product" element={<AddProduct/>}/>
                  <Route  path="/products" element={<ProductList/>}/>
                </Routes>                    
              </div>
            </Router>
          </Context.Provider>
        );
      }
    };
    export default App;

And the errors in Chrome [https://imgur.com/a/Eey1KTF]