Uncaught Error: useSubmitImpl must be used within a Data Router

Question

I am using below versions,

"formik": "^2.2.9"

"react": "^18.2.0"

"react-dom": "^18.2.0"

"react-router-dom": "^6.4.0"

"react-scripts": "5.0.1"

"typescript": "^4.7.4"

"web-vitals": "^2.1.4"

"@types/react-router-dom": "^5.3.3"

And below is my code

import { Field, Formik } from "formik";
import { Link } from "react-router-dom";
import { Form } from "react-router-dom";
import Button from "../movies/Button";

export default function CreateGenre(){
    //const navigate = useNavigate();
    return (
        <>
            <h3>Create Genre</h3>
            <Formik 
                initialValues={{
                    name: ''
                }}
                onSubmit={value=>{
                    console.log(value);
                }}
                >
                <Form>
                    <div className="form-group">
                        <label htmlFor="name" >Name</label>
                        <Field name="name" className="form-control" />
                    </div>
                    <Button type='submit'>Save changes</Button>
                    <Link className="button button-secondary" to="/genres">Cancel</Link> 
                </Form>   
            </Formik>
        </>
    );
}

And getting the error on runtime.

Answer 1

Your Form component is not imported correctly. An example of a correct import is shown below.

import { Field, Formik,Form } from "formik"; // <== this correct import
import { Link } from "react-router-dom";
import Button from "../movies/Button";