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

machine.js

const selectionMachine = Machine(
  {
    id: 'selection',
    context: {
      selectedIndex: undefined,
    },
    initial: 'unselected',
    states: {
      unselected: {
        on: {
          SELECT: 'selected',
        }
      },
      selected: {
        onEntry: [assign((ctx, event) => ({
          selectedIndex: event.selectedIndex
        })),
        sendParent((ctx) => ({
          type: 'SUBMIT',
          selectedIndex: ctx.selectedIndex
        }))
        ]
      }
    }
  }
);

const matchingMachine = Machine(
  {
    id: 'matching',
    context: {
      choiceOneRef: null,
      choiceTwoRef: null
    },
    initial: 'answering',
    states: {
      answering: {
        entry: assign({
          choiceOneRef: () => spawn(selectionMachine),
          choiceTwoRef: () => spawn(selectionMachine)
        }),
        on: {
          CHOOSE_ONE: {
            actions: send('SELECT', {
              to: ctx => ctx.choiceOneRef
            })
          },
          CHOOSE_TWO: {
            actions: send('SELECT', {
              to: ctx => ctx.choiceTwoRef
            })
          },
          SUBMIT: 'submitted',
        }
      },
      submitted: {
        on: {
          CLEAR: 'answering'
        }
      }
    }
  },
  {}
);