not showing the notification in reel time

i worked with pusher to send notifications in reel time in the log show the notifications but in front no this is how they show me in log:

[2024-05-22 17:46:05] local.INFO: Notification created {"user_id":5,"change_request_id":87,"message":"Employee5 added a duration to your change request.","is_read":false,"updated_at":"2024-05-22T17:46:05.000000Z","created_at":"2024-05-22T17:46:05.000000Z","id":48} 
[2024-05-22 17:46:05] local.INFO: NewNotificationEvent broadcasted  
[2024-05-22 18:06:33] local.INFO: sendNotification request {"user_id":5,"change_request_id":87,"message":"rEmployee5 added a duration to your change request."} 
[2024-05-22 18:06:33] local.INFO: Notification created {"user_id":5,"change_request_id":87,"message":"Employee5 added a duration to your change request.","is_read":false,"updated_at":"2024-05-22T18:06:33.000000Z","created_at":"2024-05-22T18:06:33.000000Z","id":49} 
[2024-05-22 18:06:33] local.INFO: NewNotificationEvent broadcasted

and this is the code of notification componement :

// eslint-disable-next-line no-unused-vars
import React, { useEffect, useState } from 'react';
import { ToastContainer, toast } from 'react-toastify';
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';
window.Pusher = Pusher;

const echo = new Echo({
  broadcaster: 'pusher',
  key: import.meta.env.VITE_PUSHER_APP_KEY,
  cluster: import.meta.env.VITE_MIX_PUSHER_APP_CLUSTER,
  wsHost: window.location.hostname,
  wsPort: import.meta.env.VITE_WS_PORT || 6001,
  forceTLS: false,
  disableStats: true,
});

function NotificationsComponent() {
  const [notifications, setNotifications] = useState([]);

  useEffect(() => {
    console.log('Listening for NewNotificationEvent');
    // Écoutez l'événement 'NewNotificationEvent'
    echo.channel('notifications').listen('NewNotificationEvent', (event) => {
      console.log('Received NewNotificationEvent', event);

      toast.success(event.notification.message, {
        position: "top-right",
        autoClose: 5000,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true,
        progress: undefined,
      });
      // Mettez à jour la liste des notifications avec la nouvelle notification
      setNotifications((prevNotifications) => [...prevNotifications, event.notification]);
    });

    // Chargez les notifications non lues au chargement du composant
    fetchUnreadNotifications();

    // Nettoyez l'écouteur d'événements lors du démontage du composant
    return () => {
      echo.leaveChannel('notifications');
    };
  }, []);

  // Fonction pour charger les notifications non lues
  const fetchUnreadNotifications = () => {
    fetch('/notifications/unread')
  .then((response) => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(() => {
    // Traitement des données JSON
  })
  .catch((error) => {
    console.error('Error fetching unread notifications:', error);
  });

  };

  return (
    <div>
      <h2>Notifications en temps réel</h2>
      <ul>
        {notifications.map((notification, index) => (
          <li key={index}>{notification.message}</li>
        ))}
      </ul>
      <ToastContainer />
    </div>
  );
}

export default NotificationsComponent;

what can i do