My Bootstrap Form isn't submitting with Next Js

This is my form for my sign up page

"use client";
import React from "react";
import style from "./page.module.css";
import Container from "react-bootstrap/Container";
import FloatingLabel from "react-bootstrap/FloatingLabel";
import Form from "react-bootstrap/Form";
import { useState } from "react";
import Button from "react-bootstrap/Button";
import axios from "axios";

export default function Register() {
  const [registerEmail, setRegisterEmail] = useState("");
  const [registerPassword, setRegisterPassword] = useState("");
  const register = (e) => {
    e.preventDefault(); //prevents the default behavior of submitting the form

    //checking the information
    console.log("Email: " + registerEmail);
    console.log("Password: " + registerPassword);


    axios({
      method: "post",
      url: "http://localhost:4000/api/user/register",
      data: {
        email: registerEmail,
        password: registerPassword,
      },
    })
      .then((res) => console.log(res))
      .catch((err) => console.log(err));
  };

  return (
    <div className={style.main}>
      <h1 className={style.registerTitle}>Register</h1>
      <Container className={style.registerContainer}>
        <Form onSubmit={register}>
          <FloatingLabel
            controlId="floatingInput"
            label="Email address"
            className="mb-3"
          >
            <Form.Control
              type="email"
              placeholder="name@example.com"
              name="email"

              onChange={(e) => setRegisterEmail(e.target.value)}
            />
          </FloatingLabel>
          <FloatingLabel controlId="floatingPassword" label="Password">
            <Form.Control
              type="password"
              placeholder="Password"
              name="password"

              onChange={(e) => setRegisterPassword(e.target.value)}
            />
          </FloatingLabel>
          <Button className={style.buttonRegister} type="submit">
            Submit
          </Button>
        </Form>
      </Container>
    </div>
  );
}

Is there any reason this doesn't work when I press the submit button? my backend works because when I use Postman the information goes into the database. But when I submit the information through the form nothing happens. Im using Node js for the backend and Mongo Db for my server, and Next for my frontend.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/s9FjxnQ