Generated by XState Viz: https://xstate.js.org/viz

machine.js

const roomsMachine = Machine({
  id: 'rooms',
  initial: 'step1',
  states: {
    step1: {
      on: { STEP: 'step2' },
    },
    step2: {
      on: { STEP: 'step3' },
    },
    step3: {
      type: 'final',
    },
  },
})

const reservationMachine = Machine({
  id: 'reservation',
  initial: 'idle',
  states: {
    idle: {
      on: { ACTIVATE: 'active' },
    },
    active: {
      invoke: {
        id: 'rooms',
        src: 'roomsMachine',
        onDone: 'done',
      },
      on: {
        STEP: {
          actions: send('STEP', { to: 'child' }),
        },
        MODIFY: {
          actions: send('MODIFY', {to: 'child'})
        }
      },
    },
    done: {},
  },
})