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: 'SELECTED',
          selectedIndex: ctx.selectedIndex
        }))
        ]
      }
    }
  }
  );

const matchingMachine = Machine(
  {
    id: 'matching',
    context: {
      choiceOneIndex: undefined,
      choiceOneRef: null,
      choiceTwoIndex: undefined,
      choiceTwoRef: null
    },
    initial: 'answering',
    states: {
      answering: {
        type: 'parallel',
        states: {
          choiceOne: {
            initial: 'unselected',
            states: {
              unselected: {
                on: { SELECT_ONE: 'selected' }
              },
              selected: {
                onEntry: assign({
                    choiceOneIndex: (ctx, event) => event.selectedIndex
                  }),
                type: 'final'
              }
            }
          },
          choiceTwo: {
            initial: 'unselected',
            states: {
              unselected: {
                on: { SELECT_TWO: 'selected' }
              },
              selected: {
                onEntry: assign({
                    choiceTwoIndex: (ctx, event) => event.selectedIndex
                  }),
                type: 'final'
              }
            }
          }
        },
        onEntry: assign({
          choiceOneIndex: () => undefined,
          choiceTwoIndex: () => undefined
        }),
        onDone: 'submitted',
      },
      submitted: {
        on: {
          CLEAR: 'answering'
        }
      }
    }
  },
  {}
);