action button renders in upper left corner

[cellog]

Description

Using this machine:

import { createMachine } from 'xstate';

const machine = createMachine({
  id: 'sdk-auth-settings',
  initial: 'notRequired',
  states: {
    notRequired: {
      initial: 'disabled',
      states: {
        disabled: { on: { OPTIONAL: 'optional' } },
        optional: { on: { DISABLED: 'disabled' } },
        required: {},
        hist: { type: 'history' }
      },
      on: { REQUIRED: 'verifyRequired' }
    },
    required: {
      on: {
        OPTIONAL: 'verifyOptional',
        DISABLED: 'verifyDisabled',
      }
    },
    verifyRequired: {
      on: {
        CANCEL: 'notRequired.hist',
        OK: 'required'
      }
    },
    verifyOptional: {
      on: {
        CANCEL: 'required',
        OK: 'notRequired.optional'
      }
    },
    verifyDisabled: {
      on: {
        CANCEL: 'required',
        OK: 'notRequired.disabled'
      }
    },
  }
});

Expected Result

the button for the OPTIONAL action transitioning out of required is not rendered anywhere near the required state.

Actual Result

Reproduction