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

machine.js

const stepMachine = Machine({
  id: 'step',
  initial: 'step1',
  states: {
    step1: {},
    step2: {}
  }
});

const parentMachine = Machine(
  {
    id: 'parent',
    initial: 'noStates',
    context: {
      statesArray: []
    },
    states: {
      noStates: {
        on: {
          PUSH: {
            actions: 'push',
            target: 'someStates'
          }
        }
      },
      someStates: {
        on: {
          PUSH: {
            actions: 'push',
            target: 'someStates'
          },
          POP: {
            actions: 'pop',
            target: 'someStates'
          },
          POP: {
            cond: 'oneStateLeft',
            actions: 'pop',
            target: 'noStates'
          }
        }
      }
    },
    on: {
      NEXT: send('NEXT', { to: ctx => ctx.statesArray[0] }),
      PREV: send('PREV', { to: ctx => ctx.statesArray[0] })
    }
  },
  {
    actions: {
      push: assign({
        statesArray: ctx => {
          // console.log(ctx);
          return [spawn(stepMachine), ...ctx.statesArray];
        }
      }),
      pop: assign({
        statesArray: ctx => ctx.statesArray.slice(1)
      })
    },
    guards: {
      oneStateLeft: ctx => {
        // console.log(ctx.statesArray.length);
        return ctx.statesArray.length === 1;
      }
    }
  }
);