xhr.send is not sending data in symfony how do i fix it?

Question

I'm having a problem with xhr.send(JSON.stringify(donnees)) , im trying to edit with calendar but it's not sending data. here is my code. this is the twig part :`

{% extends 'base-back.html.twig' %}
{% block body %}
    <br>
    {% block title %}<center><h1>Vols Calendar</h1></center>{% endblock %}
    <br><br><br>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js" integrity="sha256-ekrJn2FeZaiUFq99QswpQCUTME/HxaDfX7R8INzKJGE=" crossorigin="anonymous"></script>

    <div id="calendrier">
        <script src="{{ asset('assets/js/fullcalendar.js') }}"></script>
    </div>

    {% block stylesheet %}
        <style>
            #calendrier{

                width: 600px;
                margin: auto;
                height:60%;
            }
        </style>

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/main.min.css" integrity="sha256-uq9PNlMzB+1h01Ij9cx7zeE2OR2pLAfRw3uUUOOPKdA=" crossorigin="anonymous">
    {% endblock %}

    {% block javascript %}
    <script>
        window.onload = () =>{
        let calendarElt=document.querySelector("#calendrier");
        let calendar =new FullCalendar.Calendar(calendarElt,{
        initialView: 'dayGridMonth',
        locale: 'fr',
        timeZone: 'Afrique/Tunisie',
        headerToolbar: {
        start: 'prev,next today',
        center: 'title',
        end: 'dayGridMonth'
    },
        events: {{data|raw}},
                //can edit
                editable: true,
                //can make it 2 days for example
                eventResizableFromStart: true
            });
            //get an object when you move an event
            calendar.on('eventChange', (e)=>{
                let url =`/vols/api/${e.event.id}/edit`
                let donnees={
                    "destination_aller":e.event.extendedProps.destination_aller,
                    "destination_retour":e.event.extendedProps.destination_retour,
                    "title":e.event.title,
                    "start":e.event.start,
                    "date_retour":e.event.extendedProps.date_retour,
                    "passagers":e.event.extendedProps.passagers,
                    "cabine":e.event.extendedProps.cabine,
                }
                console.log(donnees);
                let xhr = new XMLHttpRequest()
                  xhr.open("PUT", url)
                xhr.setRequestHeader("X-Requested-With","XMLHttpRequest");

                xhr.send(JSON.stringify(donnees))

            })
            calendar.render();
        }
    </script>
{% endblock %}{% endblock %}

and this is my controller :

/**
     * @Route("/calendar", name="calendar")
     */
    public function calendar()
    {
        $repository = $this->getDoctrine()->getRepository(vols::class);
        $event = $repository->findAll();
        $rdvs=[];
        foreach($event as $event){
            $rdvs[]=[
                'id' => $event->getId(),
                'destination_aller' => $event->getDestinationAller(),
                'destination_retour'=>$event->getDestinationRetour(),
                'title' => $event->getVoyage(),
                'start' => $event->getDateDepart()->format('Y-m-d'),
                'date_retour' => $event->getDateRetour(),
                'passagers' => $event-> getPassagers(),
                'cabine'=>$event->getCabine(),
            ];
        }
        $data= json_encode($rdvs);
        return $this->render('vols/Callender.html.twig', compact('data'));
    }
    /**
     * @Route("/api/{id}/edit", name="editCalendar", methods={"PUT"})
     */
    public function editCalendar(vols $calendar, Request $request)    {
        //récuperation de données
        $donnees=json_decode($request->getContent());

        if(
            isset($donnees->destination_aller) && !empty($donnees->destination_aller) &&
            isset($donnees->destination_retour) && !empty($donnees->destination_retour) &&
            isset($donnees->title) && !empty($donnees->title) &&
            isset($donnees->start) && !empty($donnees->start) &&
            isset($donnees->date_retour) && !empty($donnees->date_retour) &&
            isset($donnees->passagers) && !empty($donnees->passagers) &&
            isset($donnees->cabine) && !empty($donnees->cabine)

        ){
            //données completes, on initialise un code
            $code = 200;

            //verification de l'id existe
            if(!$calendar){
                //on instancie un rende
                $calendar = new vols;
                //change code
                $code=201;
            }
            //on hydrate l'objet avec les données
            $calendar->setDestinationAller($donnees->destination_aller);
            $calendar->setDestinationRetour($donnees->destination_retour);
            $calendar->setVoyage($donnees->title);
            $calendar->setDateDepart(new DateTime($donnees->start));
            $calendar->setDateRetour(new DateTime($donnees->date_retour));
            $calendar->setPassagers($donnees->passagers);
            $calendar->setCabine($donnees->cabine);

            $em=$this->getDoctrine()->getManager();
            $em->persist($calendar);
            $em->flush();
            //return code
            return new Response('Ok', $code);
        }else{
            //données non completes
            return new Response('data not complete', 404);
        }

        return $this->render('vols/calenderEdit.html.twig');
    }

my data is sent but i can't edit it thank you.