How to POST a form with reactJS

Question

I would need help in order to be able to POST, PUT, DELETE information thanks to my API. But I get the following error:

TypeError: Cannot read properties of undefined (reading 'name')

And here is my code :

    constructor(props) {
    super(props);
    
    this.state = {
        nameComposant: '',
        indiceReferencement: '',
        referenceComposant: '',
        variante: '',
        photo: '',
        quantite: '',
        fk_Nomenclature: ''
    };
}

handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    });
  }
handleSubmit = event => {
    event.preventDefault();

    const composant = {
        nameComposant: this.state.nameComposant,
        referenceComposant: this.state.referenceComposant,
        quantite: this.state.quantite,
        indiceReferencement: this.state.indiceReferencement,
        variante: this.state.variante,
        photo: this.state.photo
    }

    axios.put(`http://localhost:2022/api/composants/` + this.state.idComposant, { composant })
        .then(res => {
            console.log(res);
            console.log(res.data);
        })
}

My component :

const ModalFormAdd = () => {
        

        if(this.state.addComposant === true){
            return (
                <Modal className='modal' open={this.state.addComposant} key="post" onClose={this.hideModalPost}>
                    <Modal.Header>
                        <Modal.Title>Ajouter un composant</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <Form className='form' onSubmit={this.handleSubmitPost}>
                            <Form.Group controlId="post-1">
                                <Form.ControlLabel>Indice de referencement</Form.ControlLabel>
                                <Form.Control onChange={this.handleChange}
                                            /*onChange={(e) => {
                                                this.setState({ indiceReferencement: e.target.value })
                                            }}*/
                                            name="indiceReference"
                                            value={indiceReferencement}
                                />
                            </Form.Group>
                            <Form.Group controlId="post-2">
                                <Form.ControlLabel>Nom Composant</Form.ControlLabel>
                                <Form.Control onChange={this.handleChange} 
                                            /*onChange={(e) => {
                                                this.setState({ nameComposant: e.target.value })
                                            }}*/
                                            name="nameComposant"
                                            value={nameComposant}
                                />
                            </Form.Group>
                            <Form.Group controlId="post-3">
                                <Form.ControlLabel>Photo du composant</Form.ControlLabel>
                                <Form.Control onChange={this.handleChange}
                                            /*onChange={(e) => {
                                                this.setState({ photo: e.target.value })
                                            }}*/
                                            name="photo"
                                            value={photo}
                                />
                            </Form.Group>
                            <Form.Group controlId="post-4">
                                <Form.ControlLabel>Reference</Form.ControlLabel>
                                <Form.Control onChange={this.handleChange}
                                            /*onChange={(e) => {
                                                this.setState({ referenceComposant: e.target.value })
                                            }}*/
                                            name="referenceComposant"
                                            value={referenceComposant}
                                />
                            </Form.Group>
                            <Form.Group controlId="post-5">
                                <Form.ControlLabel>Variante</Form.ControlLabel>
                                <Form.Control onChange={this.handleChange}
                                            /*onChange={(e) => {
                                                this.setState({ variante: e.target.value })
                                            }}*/
                                            name="variante"
                                            value={variante}
                                />
                            </Form.Group>
                            <Form.Group controlId="post-6">
                                <Form.ControlLabel>Quantité</Form.ControlLabel>
                                <Form.Control onChange={this.handleChange}
                                            /*onChange={(e) => {
                                                this.setState({ quantite: e.target.value })
                                            }}*/
                                            name="quantite"
                                            value={quantite}
                                />
                            </Form.Group>

                            <Button type='submit' appearance="primary">  Ok  </Button>
                        </Form>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button onClick={this.hideModalPost} appearance="subtle">
                            Cancel
                        </Button>
                    </Modal.Footer>
                </Modal>
            )
        } return null
    }

My problem occurs when I enter values ​​in my inputs at the level of the onChange with the use of event.target.name or event.target.value