Reactjs – AxiosError: ERR_BAD_REQUEST in NextJS

I am trying to develop a login system in my NextJS app. But I am keep getting the error –

AxiosError {message: ‘Request failed with status code 400’, name: ‘AxiosError’, code: ‘ERR_BAD_REQUEST’, config: {…}, request:
XMLHttpRequest, …}

Here, I am providing the neccessary code snippets related to this topic.

Client Side(RegisterPage) –

const [authState, setAuthState] = useState({
    name: "",
    email: "",
    password: "",
    password_confirmation: "",
  });

  const [loading, setLoading] = useState<boolean>(false);
  const [errors, setErrors] = useState<registerErrorType>({});

  const submitForm = () => {
    setLoading(true);
    axios
      .post("http://localhost:3000/api/auth/register", authState)
      .then((res) => {
        setLoading(false);
        const response = res?.data;
        // debugger;
        if (response?.status == 200) {
          console.log("User created successfully");
        } else if (response?.status == 400) {
          setErrors(response?.errors);
        }
      })
      .catch((error: any) => {
        console.error("Axios request error:", error);
        setLoading(false);
      });
  };

Server Side(RegisterPage) –

export async function POST(request: NextRequest) {
  try {
    const body = await request.json();
    const validator = vine.compile(registerSchema);
    const output = await validator.validate(body);
    validator.errorReporter = () => new ErrorReporter();
    // check if email already existes
    const user = await User.findOne({ email: output.email });
    if (user) {
      return NextResponse.json(
        {
          status: 400,
          errors: {
            email: "Email is already exists",
          },
        },
        { status: 200 }
      );
    } else {
      // Encrypt the password
      const salt = bcrypt.genSaltSync(10);
      output.password = bcrypt.hashSync(output.password, salt);
      await User.create(output);
      return NextResponse.json(
        { status: 200, message: "User created successfully" },
        { status: 200 }
      );
    }
  } catch (error) {
    if (error instanceof errors.E_VALIDATION_ERROR) {
      return NextResponse.json(
        { status: 400, errors: error.messages },
        { status: 400 }
      );
    }
  }
}

Thank you 🙂