How can I avoid polling when fetching Outlook appointment data for add-in

I'm making an outlook add-in inside a web app we already have (React app on vite, using React 18). I looked for hooks or ways to get the data from outlook (title, attendees, times, everything for a booking really) but the handlers do nothing and the best way I've found so far is use polling but that seems like an inefficient use of ressources. My intention is to listen to start/end time changes, attendee changes, title(subject) changes so I can reflect that in my add-in, I only want the event the user is currently working on so to the best of my understanding the Graph API will not work as the event has not yet been created ( I could be mistaken here, this is what I've seen so far).

I've tried to add an async event handler on the mailbox like so:

useEffect(() => {
        const mailbox = Office.context.mailbox;
        if(mailbox.item?.itemType==='appointment'){
            mailbox.addHandlerAsync(Office.EventType.AppointmentTimeChanged, console.log('item changed'), (result) => {
                console.log(result);
            });
        }
    }, []);

event is never triggered again. My thinking was the event handler only needs to be added once but that seems incorrect. I've also tried to put the data directly in the dependency of the useEffect block (I didn't think this would work, tried it anyways) like so and it also does nothing.

    useEffect(() => {
      console.log('start time changed', Office.context?.mailbox?.item?.start);
    }, [Office.context?.mailbox?.item?.start]);

Officejs is installed on the project and I can get the add-in to show in Outlook, but I don't want to put the load of polling on a user's device as some will have older/worse hardware.

How can I get this code above to work?

So I partly figured it out. Turns out that I was trying to put the event listeners on the mailbox itself instead of the item, which made it so the function was never triggered since the event was fired on the item. Haven't found a solution for the title but here is the new base, seems to work just fine (will replace the console.log with the handler functions I have).

useEffect(() => {
        const mailbox = Office.context.mailbox;
        
        if(mailbox.item?.itemType==='appointment'){
          Office.context.mailbox.item?.addHandlerAsync(Office.EventType.AppointmentTimeChanged, (msg:any)=>{console.log(msg)});
          Office.context.mailbox.item?.addHandlerAsync(Office.EventType.RecipientsChanged, (msg:any)=>{console.log(msg)});  
      }
    }, []);