Difficulty interacting with visualizer in storybook

[jnhooper]

I'm trying to add a simple visualizer to storybook to accompany hooks that will be wrapped around state machines. Everything displays perfectly, however click interactions dont seem to work. I'm able to tab to the button and hit enter to trigger an event, and if i go into the events panel of the visualizer i can send an event but clicking doesnt work. I'm hoping to use this to demonstrate the inner workings of some components to non technical people so getting the click interaction working would be great. Here is the relevant code:

export const ToggleMachine = ({
  initial = 'inactive',
  onToggle,
  enterActive,
  exitActive,
  enterInactive,
  exitInactive
}) => (
  Machine({
    initial: initial,
    id: 'toggleMachine',
    states: {
      inactive: {
        on: {
          TOGGLE: {
            target: 'active',
            actions: ['onToggle']
          }
        },
        entry: ['enterInactive'],
        exit: ['exitInactive']
      },
      active: {
        on: {
          TOGGLE: {
            target: 'inactive',
            actions: ['onToggle']
          }
        },
        entry: ['enterActive'],
        exit: ['exitActive']
      }
    }
  },
  {
    actions: {
      onToggle: (context, event) => {
        console.log('toggle');
        if (onToggle) {
          onToggle(context, event);
        }
      },
      enterActive: (context, event) => {
        if (enterActive) {
          enterActive(context, event);
        }
      },
      exitActive: (context, event) => {
        if (exitActive) {
          exitActive(context, event);
        }
      },
      enterInactive: (context, event) => {
        if (enterInactive) {
          enterInactive(context, event);
        }
      },
      exitInactive: (context, event) => {
        if (exitInactive) {
          exitInactive(context, event);
        }
      }
    }
  }
  )
);

import { ToggleMachine } from 'hooks/useToggleMachine';
import { StateChart } from '@statecharts/xstate-viz';

storiesOf('ToggleButton', module)
  .add('state chart', () => {
    const machine = ToggleMachine();
    return (
      <StateChart machine={machine} />
    );
  });