How can I fix the update in a fullCalendar

I’m creating a website with symfony 4 my website containts an event table, the events are displayed in a fullcalendar but the problem is when I drag and drop an event the date didn’t change in the database.

    <?php

namespace AppController;

use DateTime;
use Exception;
use SymfonyBundleFrameworkBundleControllerAbstractController;
use SymfonyComponentHttpFoundationResponse;
use SymfonyComponentRoutingAnnotationRoute;
use AppRepositoryEvenementsRepository;
use AppEntityEvenements;
use SymfonyComponentHttpFoundationRequest;

class ApiController extends AbstractController
{
    /**
     * @Route("/api", name="api")
     */
    public function index(): Response
    {
        return $this->render('api/index.html.twig', [
            'controller_name' => 'ApiController',
        ]);
    }

    /**
     * @Route("/api/{id}/edit", name="app_api_edit", methods={"PUT"})
     * @throws Exception
     */
    public function majEvent(?Evenements $calendar, Request $request): Response
    {
        $donnees = json_decode($request->getContent());

        if(
            isset($donnees->libelleE) && !empty($donnees->libelleE) &&
            isset($donnees->dateDE) && !empty($donnees->dateDE) &&
            isset($donnees->dateFE) && !empty($donnees->dateFE)&&
            //isset($donnees->capaciteE) && !empty($donnees->capaciteE)&&
            isset($donnees->descriptionE) && !empty($donnees->descriptionE)&&
            isset($donnees->espaceE) && !empty($donnees->espaceE)
            //isset($donnees->etatEV) && !empty($donnees->etatEV)

        ){

            $code = 200;

            if(!$calendar){

                $calendar = new Evenements;

                $code = 201;
            }
            $calendar->setLibelleE($donnees->libelleE);
            //$calendar->setCapaciteE($donnees->capaciteE);
            $calendar->setDescriptionE($donnees->descriptionE);
            $calendar->setEspaceE($donnees->espaceE);
            //$calendar->setEtatEv($donnees->etatEV);
            $calendar->setDateDE(new DateTime($donnees->dateDE));
            $calendar->setDateFE(new DateTime($donnees->dateFE));

            $em = $this->getDoctrine()->getManager();
            $em->persist($calendar);
            $em->flush();

            // On retourne le code
            return new Response('Ok', $code);
        }else{
            // Les données sont incomplètes
            return new Response('Données incomplètes', 404);
        }



        return $this->render('api/index.html.twig', [
            'controller_name' => 'ApiController',
        ]);
    }
}

andthis is a second controller

    <?php

namespace AppController;

use SymfonyBundleFrameworkBundleControllerAbstractController;
use SymfonyComponentHttpFoundationResponse;
use SymfonyComponentRoutingAnnotationRoute;
use AppRepositoryEvenementsRepository;
use AppEntityEvenements;
use SymfonyComponentHttpFoundationJsonResponse;
class CalendarController extends AbstractController
{
    /**
     * @Route("/calendar", name="app_calendar")
     */
    public function index(EvenementsRepository $calendar): Response
    {
        $events = $calendar->findAll();
        $rdvs = [];
        foreach($events as $event){
            $rdvs[] = [
                'id' => $event->getId(),
                'title' => $event->getLibelleE(),
                'start' => $event->getDateDE()->format('Y-m-d H:i:s'),
                'end' => $event->getDateFE()->format('Y-m-d H:i:s'),
                'description' => $event->getDescriptionE(),
                'espace' => $event->getEspaceE(),
                //'capacite' => $event->getCapaciteE(),
                //'etat' => $event->getEtatEv(),
            ];
        }
        $data = json_encode($rdvs);
        return $this->render('calendar/index.html.twig', compact('data'));
    }
}

this is my twig page it contains the calendar and soe events displayed

    {% extends 'base.html.twig' %}

{% block title %}Calendrier{% endblock %}
{% block stylesheet %}
    <style>
        #calendrier{
            width: 80%;
            margin: auto;

        }
    </style>
{% endblock %}
{% block body %}

    <div class="container">
        <div id="calendrier">

        </div>
    </div>
{% endblock %}
{% block javascripts %}
    <script>

        window.onload = () => {
            let calendarEl = document.querySelector("#calendrier");
            let calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                locale: 'fr',
                timezone: 'Europe/paris',
                headerToolbar: {
                    start: 'prev,next today',
                    center: 'title',
                    end: 'dayGridMonth,timeGridWeek'
                },
                events : {{ data|raw }},
                editable : true,
                eventResizableFormStart : true
            })

            calendar.on('eventChange', (e) => {
                let url = `/api/${e.event.id}/edit`
                let donnees ={


                    "title": e.event.title,
                    "start": e.event.start,
                    "end": e.event.end,
                    //"capacite": e.event.capacite,
                    "description": e.event.extendedProps.description,
                    "espace": e.event.extendedProps.espace
                    //"etat":e.event.editable.etat,

                }
                let xhr = new XMLHttpRequest

                xhr.open("PUT", url)
                xhr.send(JSON.stringify(donnees))
            })
            calendar.render()
        }

    </script>
{% endblock %}