ارسال البيانات من الواجهة الامامية إلى الخلفية خطأ فى عملية المصادقة

قمت بعمل تطبيق حجز مناسبات عند الغاء او اضافة الحجز يعمل التطبيق في poatman وفي الواجهة الامامية حاولت كثيرا ولم اعرف السبب

import React, { useContext, useEffect, useState } from "react";
import {
  IonContent,
  IonHeader,
  IonLoading,
  IonPage,
  IonTitle,
  IonToolbar,
} from "@ionic/react";
import axios from "../config/axios";
import { AuthContext } from "../context/AuthContext";
import { CREATE_EVENT_URL, GET_MYBOOKING_URL } from "../config/urls";
import {
  IonButton,
  IonCard,
  IonCardContent,
  IonCardHeader,
  IonCardSubtitle,
  IonCardTitle,
  IonBreadcrumb,
  IonBreadcrumbs,
  IonIcon,
} from "@ionic/react";
import { arrowForwardCircle } from "ionicons/icons";
import { useParams } from "react-router";

const Booking = () => {
  const [booking, setBooking] = useState([]);
  const [showLoading, setShowLoading] = useState(false);

  const { jwt } = useContext(AuthContext);
  const eventId = useParams();

  useEffect(() => {
    getBooking();
  }, []);

  const onSubmit = async () => {
    try {
      await axios
        .put(CREATE_EVENT_URL + "/" + { eventId }, {
          headers: {
            Authorization: jwt,
          },
        })
        .then((res) => {
          console.log("Event is deleted:", res.data);
        });
    } catch (e) {
      console.log(e);
    }
  };

  const getBooking = async () => {
    setShowLoading(true);

    try {
      await axios
        .get(GET_MYBOOKING_URL, {
          headers: {
            Authorization: jwt,
          },
        })
        .then((res) => {
          setBooking(res.data.getBookings[0].Events);
          setShowLoading(false);
        });
    } catch (e) {
      console.error("Error creating event:", e.response ? e.response.data : e);
      setShowLoading(false);
    }
  };

  return (
    <IonPage>
      <IonBreadcrumbs>
        <IonBreadcrumb href="/events">
          Home
          <IonIcon slot="separator" icon={arrowForwardCircle}></IonIcon>
        </IonBreadcrumb>
        <IonBreadcrumb href="/booking">Booking</IonBreadcrumb>
      </IonBreadcrumbs>
      {showLoading ? (
        <IonLoading isOpen={showLoading} duration={1000} />
      ) : (
        booking && (
          <>
            <IonHeader>
              <IonToolbar color="primary">
                <IonTitle>صفحة حجوزاتي </IonTitle>
              </IonToolbar>
            </IonHeader>
            <IonContent>
              {booking.length > 0 ? (
                booking.map((Events) => {
                  return (
                    <IonCard key={Events.id}>
                      <IonCardHeader>
                        <IonCardTitle>{Events.title}</IonCardTitle>
                        <IonCardSubtitle>{Events.description}</IonCardSubtitle>
                      </IonCardHeader>

                      <IonCardContent>{Events.price}</IonCardContent>

                      <IonButton fill="clear" onClick={() => onSubmit()}>
                        الغاء
                      </IonButton>
                    </IonCard>
                  );
                })
              ) : (
                <IonCardContent>لا يوجد حجوزات</IonCardContent>
              )}
            </IonContent>
          </>
        )
      )}
    </IonPage>
  );
};
export default Booking;