How to correctly handle checkbox with React?

we are a totally lost in the checkboxes with React.

Our checkbox for the fields : RGPD ans ChaterAcceptance, doesn't take the boolean change when we post it in the database.

Could anyone could give us an explanation to solve our problem, we already made some tests and search but if your knowledge could help us, it would be great.

Here's our code of RegisterPagePro.jsx :

import React, { useState } from "react";
import Field from "../components/forms/Field";
import { Link } from "react-router-dom";
import UsersProAPI from "../services/userProAPI";
import { toast } from "react-toastify";

const ProRegisterPage = ({ history }) => {
  const [userPro, setUserPro] = useState({
    firstName: "",
    lastName: "",
    email: "",
    RGPD: false,
    address: "",
    siret: "",
    therapy: "",
    chaterAcceptance: false,
    rate: "",
    paymentMethod: "",
    expertise: "",
    presentation: "",
    openingTime: "",
    languages: "",
    password: "",
    passwordConfirm: ""
  });

  const [errors, setErrors] = useState({
    firstName: "",
    lastName: "",
    email: "",
    RGPD: false,
    address: "",
    siret: "",
    therapy: "",
    chaterAcceptance: false,
    rate: "",
    paymentMethod: "",
    expertise: "",
    presentation: "",
    openingTime: "",
    languages: "",
    password: "",
    passwordConfirm: ""
  });

  // Gestion des changements des inputs dans le formulaire
  const handleChange = ({ currentTarget }) => {
    const { name, value } = currentTarget;
    setUserPro({ ...userPro, [name]: value });
  };

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

    const apiErrors = {};

    if (userPro.password !== userPro.passwordConfirm) {
      apiErrors.passwordConfirm =
        "Votre confirmation de mot de passe n'est pas conforme avec le mot de passe original";
      setErrors(apiErrors);
      toast.error("Des erreurs dans votre formulaire !");
      return;
    }

    try {
      await UsersProAPI.registerPro(userPro);
      setErrors({});

      // TODO : Flash success
      toast.success(
        "Vous êtes désormais inscrit, vous pouvez vous connecter !"
      );
      history.replace("/login");
    } catch (error) {
      const { violations } = error.response.data;

      if (violations) {
        violations.forEach(violation => {
          apiErrors[violation.propertyPath] = violation.message;
        });
        setErrors(apiErrors);
      }

      // TODO : Flash erreur
      toast.error("Des erreurs dans votre formulaire !");
    }
  };
  return (
    <>
      <h1>Inscription pour les professionnels</h1>
      <form onSubmit={handleSubmit}>
        <Field
          name="firstName"
          label="Prénom"
          placeholder="Votre joli prénom"
          error={errors.firstName}
          value={userPro.firstName}
          onChange={handleChange}
        />
        <Field
          name="lastName"
          label="Nom de famille"
          placeholder="Votre nom de famille"
          error={errors.lastName}
          value={userPro.lastName}
          onChange={handleChange}
        />
        <Field
          name="email"
          label="Adresse email"
          placeholder="Votre adresse email"
          type="email"
          error={errors.email}
          value={userPro.email}
          onChange={handleChange}
        />
        <Field
          name="RGPD"
          label="Conditions utilisateur"
          placeholder="Veuillez cocher la case"
          type="checkbox"
          error={errors.RGPD}
          value={userPro.RGPD}
          onClick={handleClick}
        />
        <Field
          name="address"
          label="Adresse postale"
          placeholder="Votre adresse postale"
          error={errors.address}
          value={userPro.address}
          onChange={handleChange}
        />
        <Field
          name="siret"
          label="Siret"
          placeholder="Siret"
          error={errors.siret}
          value={userPro.siret}
          onChange={handleChange}
        />
        <Field
          name="therapy"
          label="Thérapie pratiquée"
          placeholder="Thérapie"
          error={errors.therapy}
          value={userPro.therapy}
          onChange={handleChange}
        />
        <Field
          name="chaterAcceptance"
          label="Acceptation de la charte"
          placeholder="Charte"
          type="checkbox"
          error={errors.chaterAcceptance}
          value={userPro.chaterAcceptance}
          onClick={handleClick}
        />
        <Field
          name="rate"
          label="Honoraires"
          placeholder="Honoraires"
          error={errors.rate}
          value={userPro.rate}
          onChange={handleChange}
        />
        <Field
          name="paymentMethod"
          label="Méthode de paiement"
          placeholder="Votre méthode de paiement"
          error={errors.paymentMethod}
          value={userPro.paymentMethod}
          onChange={handleChange}
        />
        <Field
          name="expertise"
          label="Compétence"
          placeholder="Vos compétences"
          error={errors.expertise}
          value={userPro.expertise}
          onChange={handleChange}
        />
        <Field
          name="presentation"
          label="Présentation"
          placeholder="Présentation"
          error={errors.presentation}
          value={userPro.presentation}
          onChange={handleChange}
        />
        <Field
          name="openingTime"
          label="Horaires d'ouverture"
          placeholder="Horaires"
          error={errors.openingTime}
          value={userPro.openingTime}
          onChange={handleChange}
        />
        <Field
          name="languages"
          label="Langues"
          placeholder="Langues parlées"
          error={errors.languages}
          value={userPro.languages}
          onChange={handleChange}
        />
        <Field
          name="password"
          label="Mot de passe"
          type="password"
          placeholder="Votre mot de passe ultra sécurisé"
          error={errors.password}
          value={userPro.password}
          onChange={handleChange}
        />
        <Field
          name="passwordConfirm"
          label="Confirmation de mot de passe"
          type="password"
          placeholder="Confirmez votre super mot de passe"
          error={errors.passwordConfirm}
          value={userPro.passwordConfirm}
          onChange={handleChange}
        />
        <div className="form-group">
          <button type="submit" className="btn btn-success">
            Confirmation
          </button>
          <Link to="/login" className="btn btn-link">
            J'ai déjà un compte
          </Link>
        </div>
      </form>
    </>
  );
};

export default ProRegisterPage;