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

machine.js

const matchingMachine = Machine(
  {
    id: 'matching',
    context: { choiceOneIndex: undefined, choiceTwoIndex: undefined },
    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'
        }
      }
    }
  },
  {}
);