useAllowedEvents.ts

import { useMemo } from "react";
import { Interpreter } from "xstate";
import { useService } from "@xstate/react";

export function useAllowedEvents(service: Interpreter<any>) {
  const [state] = useService(service);
  const allowedEvents = useMemo(
    () =>
      state.nextEvents.filter(
        (event) => service.machine.transition(state, event).changed
      ),
    [service, state]
  );

  return allowedEvents;
}