This code returns the data for currentOffice but doesn't work for user & offices:

const appService = interpret(appMachine).start();

const data: {
  user: UserWithSettings;
  currentOffice: { id: number; name: string };
  offices: Office[];
} = {
  user: null,
  currentOffice: { id: 0, name: '' },
  offices: []
};

appService.onTransition((state) => {
  if (state.matches('idle')) {
    // Data has been fetched
    const { user, currentOffice, offices } = state.context;
    data.user = user;
    data.currentOffice = currentOffice || { id: 0, name: '' };
    data.offices = offices || [];
  }
});

async function fetchData(slackId: string) {
  appService.send({ type: 'FETCH_DEFAULT_OFFICE', payload: slackId });
  appService.send({ type: 'FETCH_USER', payload: slackId });
  appService.send({ type: 'FETCH_OFFICES' });
}

import { UserWithSettings } from '@/models/user';
import { getOffices, getUserBySlackId } from '@/services'; // Import your async functions here
import { Office } from '@prisma/client';
import { assign, createMachine } from 'xstate';
import { RootState } from './store'; // Import your RootState type from the store

interface AppMachineContext {
  user: UserWithSettings | null;
  offices: Office[] | null;
  currentOffice: { id: number; name: string } | null;
  dateRange: RootState['dateRange']['value'] | null;
}

const appMachine = createMachine<AppMachineContext>(
  {
    id: 'appMachine',
    initial: 'idle',
    predictableActionArguments: true,
    context: {
      user: null,
      currentOffice: null,
      offices: null,
      dateRange: null
    },
    states: {
      idle: {
        on: {
          FETCH_USER: 'fetchingUser',
          FETCH_OFFICES: 'fetchingOffices',
          FETCH_DEFAULT_OFFICE: 'fetchingDefaultOffice'
        }
      },
      fetchingUser: {
        invoke: {
          src: 'fetchUser',
          onDone: {
            target: 'idle',
            actions: assign({
              user: (_, event) => event.data
            })
          },
          onError: {
            target: 'idle'
          }
        }
      },
      fetchingOffices: {
        invoke: {
          src: 'fetchOffices',
          onDone: {
            target: 'idle',
            actions: assign({
              offices: (_, event) => event.data
            })
          },
          onError: {
            target: 'idle'
          }
        }
      },
      fetchingDefaultOffice: {
        invoke: {
          src: 'fetchDefaultOffice',
          onDone: {
            target: 'idle',
            actions: assign({
              currentOffice: (_, event) => event.data
            })
          },
          onError: {
            target: 'idle'
          }
        }
      }
    }
  },
  {
    services: {
      fetchUser: async (
        context: AppMachineContext,
        event: { type: 'FETCH_USER'; payload: string }
      ) => {
        console.log({ event });
        return await getUserBySlackId(event.payload);
      },
      fetchOffices: async () => {
        return await getOffices();
      },
      fetchDefaultOffice: async (
        context: AppMachineContext,
        event: { type: 'FETCH_DEFAULT_OFFICE'; payload: string }
      ) => {
        const user = await getUserBySlackId(event.payload);
        const { defaultOffice } = user?.settings || {};
        return { id: defaultOffice?.id || 0, name: defaultOffice?.name || '' };
      }
    }
  }
);

export default appMachine;
