Reactjs – onSubmit is not a function

This is my Form component:

import React, { useState } from "react"

export default function Form({ onSubmit }) {
  const [formData, setFormData] = useState({
    name: "",
    reason: "",
    date: "",
    class: "",
    message: "",
  });

  const handleInputChange = (event) => {
    const {id, value} = event.target;
    setFormData((prevData) => ({
      ...prevData,
      [id]: value
    }));
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    onSubmit(formData);
  };  
 
  return (
    <div>
      <form className="form" onSubmit={handleSubmit}>

        <a id="form-a">Name:</a>
        <input
          type="text"
          id="name"
          value={formData.name}
          onChange={handleInputChange}
          required
        />

        <a id="form-a">Reason:</a>
        <input
          type="text"
          id="reason"
          value={formData.reason}
          onChange={handleInputChange}
          required
        />

        <a id="form-a">Date:</a>
        <input
          type="text"
          id="date"
          value={formData.date}
          onChange={handleInputChange}
          required
        />

        <a id="form-a">Class:</a>
        <input
          type="text" id="class"
          value={formData.class}
          onChange={handleInputChange}
          required
        />

        <a id="form-a1">Message:</a>
        <input
          type="text"
          id="message"
          value={formData.message}
          onChange={handleInputChange}
        />

        <button type="submit" id="submit-form">Submit</button>
      </form>
    </div>
  )
}

Whenever the button is clicked, I want the handleSubmit function to be called, which loads user input into a new page. But when I click the button I get:

TypeError: onSubmit is not a function at handleSubmit

onSubmit is also getting called on my component.js and app.js file. The onSubmit function appears to be passed down correctly from my form component onto my app.js and components.js file.
I’m not sure what’s wrong?

App.js:

import React, { useState } from "react"
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Components from "./Components"
import GeneratedPage from "./GeneratedPage"

export default function App() {
  const [capturedData, setCapturedData] = useState(null);
    
  const handleFormSubmit = (formData) => {
    setCapturedData(formData);
  };

  return (
    <Router>
      <div>
        <Switch>
          <Route
            path="/"
            element={<Components onSubmit={handleFormSubmit} />}
          ></Route>
          <Route
            path="/generated"
            element={<GeneratedPage capturedData={capturedData} />}
          ></Route>
        </Switch>
      </div>
    </Router>
  )
}

Components.js:

import React from "react"
import Navbar from "./Navbar"
import Intro from "./Intro"
import Form from "./Form"

export default function Components({ onSubmit }) {
  return (
   <div>
     <Navbar />
     <Intro />
     <Form onSubmit={onSubmit} />
   </div>
  )
}