Form Submit Navigation

import Button from '@mui/material/Button';

import { useState } from 'react';

import { useNavigate } from "react-router-dom";

export default function Homepage() {

    const navigate = useNavigate();

    const [formData, setFormData] = useState({

        name: "",

        email: "",

      });

    function handler() {

        console.log("Clicked");

        navigate('/login');

    }

    const handleSubmit = (event) => {

        event.preventDefault();    

        // Redirect to your desired page here

        navigate("/login");

      };

    return (

        <div>

              <h1 style={{ textAlign: 'center' }}>Header</h1>                

                <div>

                    // Form Submit Navigation Function

                    <form onSubmit={handleSubmit}>

                        <input

                            type="text"

                            name="name"

                            placeholder="Name"

                            v={formData.name}

                            onChange={(e) => setFormData({ ...formData, name: e.target.value })}

                        />

                        <input

                            type="email"

                            name="email"

                            placeholder="Email"

                            value={formData.email}

                            onChange={(e) => setFormData({ ...formData, email: e.target.value })}

                        />

                        <button type="submit">Submit</button>

                    </form>

                </div>

     

        </div >

    );

}