The problem is that data is not getting stored in database, getting an error TypeError: Cannot read properties of undefined (reading ‘Name’)

this is my signup page code

const onSubmit = async (data) => {
      const response = await fetch("http://localhost:3000/signup", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
      });
  };
<form
          action="/SignUp"
          method="POST"
          className="flex flex-col gap-6 mt-10 justify-center items-center h-[250px] absolute bottom-[17rem]"
          onSubmit={handleSubmit(onSubmit)}
        >
          <input
          name="Name"
            className="bg-[#1c1d1e] w-[30rem] h-[3rem] font-light text-sm pl-5"
            value="default value"
            autoComplete="off"
            placeholder="NAME"
            type="text"
            {...register("Name")}
          />
          <input
          name="Email"
            className="bg-[#1c1d1e] w-[30rem] h-[3rem] font-light text-sm pl-5"
            value="default value"
            autoComplete="off"
            placeholder="EMAIL"
            type="text"
            {...register("Email")}
          />
          <input
          name="Password"
            className="bg-[#1c1d1e] w-[30rem] h-[3rem] font-light text-sm pl-5"
            value="default value"
            autoComplete="off"
            placeholder="PASSWORD"
            type={type}
            {...register("Password")}
          />
          <button
            className="absolute right-[20px] bottom-[69px] "
            onClick={togglePassword}
          >
            <img
              className="invert w-[1.5rem]"
              ref={passwordIcon}
              src="https://www.svgrepo.com/show/528962/eye.svg"
              alt="img not foud"
            />
          </button>
          <button
            className="text-sm font-semibold border-2 w-28 h-8 rounded-[5px]"
            type="submit"
          >
            <NavLink to="/">SUBMIT</NavLink>
          </button>
        </form>

this is my server code

const express = require("express");
const app = express();
const localStrategy = require("passport-local");
const expressSession = require("express-session");
const passport = require("passport");
const User = require("./user");
const cors = require("cors");
const port = 3000;
const bodyParser = require('body-parser');
app.use(bodyParser.json());


// app.use(express.json)
app.use(cors());

app.use(
  expressSession({
    resave: false,
    saveUninitialized: false,
    secret: "this is secret",
  })
);
app.use(passport.initialize());
app.use(passport.session());
passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser());

passport.use(new localStrategy(User.authenticate()));

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

app.get("/", (req, res) => {
  res.redirect("http://localhost:3001/SignUp");
});

app.post("/SignUp", async function (req, res) {
  console.log(req.body)

  const user = new User({
    name: req.body.Name,
    email: req.body.Email,
  });

  User.register(user, req.body.Password).then(() => {
    passport.authenticate("local")(req, res, function () {
      res.redirect("http://localhost:3001/");
    });
  });
  console.log(user);
});

Tried to ask chatgpt but it didn’t help me. I am new to this, like currently i am in a learning phase. Stuck in this since 3-4 days.