I'm trying to add User from next.js to Strapi v4, and I'm getting the following error message:

POST http://localhost:1337/api/auth/local/register 400 (Bad Request)

My register page is in pages/account/register.js, which takes user input for username, email, and password, and post it using handleSubmit. logging out username, email, and password works perfectly fine. Posting to the backend is an issue here.

My code looks like below:

export default function registerPage() {
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log({ username, email, password });

    axios
    .post('http://localhost:1337/api/auth/local/register', {
    username: 'Strapi user',
    email: 'user@strapi.io',
    password: 'strapiPassword',
  })
      .then((response) => {
        // Handle success.
        console.log("Well done!");
        console.log("User profile", response.data.user);
        console.log("User token", response.data.jwt);
      })
      .catch((error) => {
        // Handle error.
        console.log("An error occurred:", error.response);
      });
  };

  return (...User Input Form)
}

Thank you for reading.