Пытаюсь передать данные на сервер в БД с фронта (react). В списке выбираю из 4 категорий любую, но в итоге передается значение null в БД

Я только изучаю react и ни как не могу передать некоторые данные, они приходят со значением null вот пример выбираю категорию из списка, но приходит пустое значение

{
    "original_name": "7",
    "author": null,
    "case_category": null,
    "article": 100,
    "pub_date": "2023-11-30T10:24:08.346215Z",
    "preliminary_hearing": "2023-01-01"
}

import axios from 'axios';

const AddBusinessCard = () => {
const [formData, setFormData] = useState({
 original_name: '',
 author: '',
 case_category: null, // Значение выбранной категории
 article: '',
 pub_date: '',
 preliminary_hearing: '',
});

const [categoryList, setCategoryList] = useState([]);

useEffect(() => {
 axios
   .get('http://localhost:8000/business_card/category/')
   .then(response => {
     setCategoryList(response.data);
   })
   .catch(error => {
     console.error('Error fetching category list:', error);
   });
}, []);

const handleChange = event => {
 const { name, value } = event.target;

 if (name === 'case_category') {
   const selectedCategoryId = parseInt(value);
   setFormData(prevState => ({
     ...prevState,
     case_category: selectedCategoryId !== 0 ? selectedCategoryId : null,
   }));
 } else {
   setFormData(prevState => ({
     ...prevState,
     [name]: value,
   }));
 }
};



const handleSubmit = event => {
 event.preventDefault();

 const formattedData = {
   ...formData,
   case_category: parseInt(formData.case_category),
   preliminary_hearing: new Date(formData.preliminary_hearing).toISOString().split('T')[0],
 };

 axios
   .post('http://localhost:8000/business_card/businesscard/', formattedData)
   .then(response => {
     console.log('Business card added:', response.data);
     setFormData({
       original_name: '',
       author: '',
       case_category: '',
       article: '',
       pub_date: '',
       preliminary_hearing: '',
     });
   })
   .catch(error => {
     console.error('Error adding business card:', error);
   });
};

return (
 <div>
   <h2>Add Business Card</h2>
   <form onSubmit={handleSubmit}>
     <label>
       Original Name:
       <input type="text" name="original_name" value={formData.original_name} onChange={handleChange} />
     </label>
     <label>
       Author:
       <input type="text" name="author" value={formData.author} onChange={handleChange} />
     </label>

     <label>
       Case Category:
       <select name="case_category" value={formData.case_category} onChange={handleChange}>
         <option value="">Select a Category</option>
         {categoryList.map((category, index) => (
           <option key={index} value={category.id}>
             {category.title}
           </option>
         ))}
       </select>
     </label>


     <label>
       Article:
       <input type="text" name="article" value={formData.article} onChange={handleChange} />
     </label>
     <label>
       Pub Date:
       <input type="text" name="pub_date" value={formData.pub_date} onChange={handleChange} />
     </label>
     <label>
       Preliminary Hearing:
       <input type="text" name="preliminary_hearing" value={formData.preliminary_hearing} onChange={handleChange} />
     </label>
     <button type="submit">Add Business Card</button>
   </form>
 </div>
);
};

export default AddBusinessCard;

Вот модель

class Category(models.Model):
    '''6. Модель категорий дела'''
    title = models.CharField(
        max_length=200,
        verbose_name='Название категории'
        )
    description = models.TextField(
        blank=True,
        null=True,
        verbose_name='Описание'
        )
    slug = models.SlugField(
        max_length=255,
        unique=True
        )

    class Meta:
        ordering = ('title',)
        verbose_name = 'Категория дела'
        verbose_name_plural = 'Категория дела'

    def __str__(self) -> str:
        return self.title