error 422 from ajax request on dynamic form Symfony

I try to put a specific value into my form from the user’s choice thanks to js. When he selects a client i want to display the relevant contract and structure that are related to it in a choice field, but i always get the “422 Unprocessable entity” error. The weird thing is that when i choose a client, it’s structure and contract are updated with the good values, but i can’t manage to get them in my controller because the value is “null”.

This is my form :

public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('idContrat', ChoiceType::class,[
                'placeholder' => 'Contrat ( Choisir un contrat) ',
                'choice_value' => function(Contrat $c = null){
                    return $c ? $c->getNomContrat() : '';
                },
            ])
            ->add('nomEntite', ChoiceType::class, [
                'placeholder' => 'Entite ( Choisir une entite) ',
                'choice_value' => function(Entite $e = null){
                    return $e ? $e->getNomEntite() : '';
                },
            ])
            ->add('idClient', EntityType::class,[
                'class' => Client::class,
                'choice_label' => 'Client',
                'required' => true,
            ]);
        $formModifer = function(FormInterface $form, Client $idClient){
            $nomContrat = null === $idClient ? [] : $idClient->getContrats();
            $nomEntite = null === $idClient ? [] : $idClient->getEntites();
            $form->add('idContrat', EntityType::class, [
                'class' => Contrat::class,
                'choices' => $nomContrat,
                'choice_label' => 'nomContrat',
                'placeholder' => 'Contrat (Choisir un contrat)',
                'label' => 'Contrat',
                'choice_value' => function (?Contrat $entity) {
                    return $entity? $entity->getNomContrat():'';
                }]);
            $form->add('nomEntite', EntityType::class, [
                'class' => Entite::class,
                'choices' => $nomEntite,
                'choice_label' => 'nomEntite',
                'placeholder' => 'Entite (Choisir une entite)',
                'label' => 'Entite',
                'choice_value' => function (?Entite $entity) {
                    return $entity ? $entity->getNomEntite() : '';
                }]);
        };

        $builder->get('idClient')->addEventListener(
            FormEvents::POST_SUBMIT,
            function (FormEvent $event) use ($formModifer){
                $idClient = $event->getForm()->getData();
                $formModifer($event->getForm()->getParent(), $idClient);
            }
        );
    }

The js file :

window.onload = () => {
    let idClient = document.getElementById('intervention_form_idClient')
    idClient.addEventListener("change", function(){
        let form = this.closest("form");
        let data = this.name + "=" + this.value

        fetch(form.action,{
            method: form.getAttribute("method"),
            body: data,
            headers: {
                "Content-type": "application/x-www-form-urlencoded; charset:UTF-8"
            }
        })
            .then(response => response.text())
            .then(html => {
                let content = document.createElement("html");
                content.innerHTML = html;
                let newSelectContrat = content.querySelector("#intervention_form_idContrat")
                document.querySelector("#intervention_form_idContrat").replaceWith(newSelectContrat)

                let newSelectEntite = content.querySelector("#intervention_form_nomEntite")
                document.querySelector("#intervention_form_nomEntite").replaceWith(newSelectEntite)


            })
    })
}

and my twig :

{% block body %}
    {% for flash_message in app.session.flashBag.get('error') %}
        <div class="alert alert-warning" role="alert">
            {{ flash_message }}
        </div>
    {% endfor %}
        {{ form_start(form) }}
    <button type="submit" class="btn-primary">Submit</button>
        {{ form_end(form) }}
    {% block javascripts %}
        <script src="{{ asset('assets/js/DynamicFormAddInterventions.js') }}"></script>
    {% endblock %}
{% endblock %}

i’ve already tried different version of this like by using jQuery but i always get the same error, i didn’t find anything that actually helped me on this topic.

thanks