upload image and text with form

import React from "react";
import { useForm } from "react-hook-form";
import axios from "axios";

class AddAnimal extends React.Component {
    
  constructor(props) {
    super(props);

    this.state = {
      modifiedData: {
        nom: '',
        description: '',
        image : '',
        races: [],
        images :[],
   
      },
      allRaces: [],
      error: null,
    };
    
  }

  onImageChange = event => {
    console.log(event.target.files);

    this.setState({
      images: event.target.files,
    });
  };

  
  componentDidMount = async () => {
    try {
      const response = await axios.get('http://localhost:1337/api/races');
      this.setState({ allRaces: response.data.data });
    } catch (error) {
      this.setState({ error });
    }
  };



  handleInputChange = ({ target: { name, value } }) => {
    this.setState(prev => ({
      ...prev,
      modifiedData: {
        ...prev.modifiedData,
        
        [name]: value,
      },
    }));
  };

  handleSubmit = async e => {
    e.preventDefault();
    const formData = new FormData();
    Array.from(this.state.images).forEach(image => {
      formData.append('files', image);
    });
    try {
      const response = await axios.post('http://localhost:1337/api/animaux?populate=*', 
      {
        "data": {
          nom:  this.state.modifiedData.nom,
          Description: this.state.modifiedData.description,
          image : this.images,
          races: this.state.modifiedData.races
        }
    
    
      })
      axios
      .post(`http://localhost:1337/api/upload`, formData, {
        headers: { 'Content-Type': 'multipart/form-data' },
      })
      






      console.log(response);
    } catch (error) {
      this.setState({ error });
    }
    
  };

  

  
  renderCheckbox = race => {
    const {
      modifiedData: { races },
    } = this.state;
    const isChecked = races.includes(race.id);
    const handleChange = () => {
      if (!races.includes(race.id)) {
        this.handleInputChange({
          target: { name: 'races', value: races.concat(race.id) },
        });
      } else {
        this.handleInputChange({
          target: {
            name: 'races',
            value: races.filter(v => v !== race.id),
          },
        });
      }
    };

    return (
      

{race.attributes.nom}


    );
  };

  render() {
    const { error, allRaces, modifiedData } = this.state;


    if (error) {
      return 
An error occured: {error.message}
;
    }

    return (
      


Ajouter un animal



            Name:
            


            Description:
            





Select races
            {allRaces.map(this.renderCheckbox)}
          


Ajouter


    );
  }
}

export default AddAnimal;