Почему выходит ошибка к браузерной консоли POST localhost:8000/registration/ 400 (Bad Request) при регистрации пользователя?

Question

[p3tzl300lum3n]

Проблема состоит в том, что на клиенте не получается зарегистрировать пользователя, хотя на стороне сервера все корректно отрабатывает.
Создал конфиг компонент api:

import axios from 'axios';

const api = axios.create({
    baseURL: "http://localhost:8000",
    headers: {
        "Content-Type": "application/json",
    },
});
export const setAuthToken = (token) => {
    if (token){
        api.defaults.headers.common["Authorization"] = `Token ${token}`;
    } 
    else{
        delete api.defaults.headers.common["Authorization"];
    }
}
export default api;

Думал, проблема в Content-type, изменил на text/plain, не помогло.
Вот компонент регистрации:

import React, { useState } from 'react';
import api from './api';
import '../App.css';
export default function Registration(){
    const [FORMA, setFORMA] = useState(
        {
            first_name: "",
            last_name: "",
            patronymic: "",
            email: "",
            password: "",
            birth_date: "",
        }
    )
const handleOnChange = async(event)=>{
    setFORMA({...FORMA, [event.target.name]: event.target.value  })
   }
   const handleSubmit = async(event)=>{
        event.preventDefault()
        try{
            const res = await api.post('/registration/', FORMA);
        } catch (err) {
            console.log("Ошибка")
        }
   }
    return(
        <>
            <div className="mainDivReg">
                <h1>Регистрация</h1>
                    <form action="" onSubmit={handleSubmit}>
                        <input name='first_name' placeholder='Введите ваше имя' onChange={handleOnChange} />
                        <input name='last_name' placeholder='Введите вашу фамилию' onChange={handleOnChange} />
                        <input name='patronymic' placeholder='Введите ваше отчество' onChange={handleOnChange} />
                        <input type="email" name='email' placeholder='Введите вашу почту' onChange={handleOnChange} />
                        <input type="password" name='password' placeholder='Введите пароль' onChange={handleOnChange} />
                        <input type="date" name='birth_date' placeholder='Введите дату рождения' onChange={handleOnChange} />
                        <button type='submit'>Зарегистрироваться</button>
                    </form>
            </div>
        </>
    )
}

В useState передаю данные согласно fiels сериализатора, в том же порядке и те же названия. Данные ввожу в правильном формате. Только учусь создавать авторизацию. Подскажите, в чем может быть проблема?