How to use the xstate/lib/interpreter.interpret function in xstate

interpretMachine(machine) {
    // parse machine actions // get actions from them and stub them out
    const actionNames = Object.keys(machine.options.actions || {});

    const stubbedActions = actionNames.reduce((acc, name) => { 
      acc[name] = this.onActionTriggered.bind(this, name);
      return acc;
    }, {})

    const interpreter = interpret(this.machine.withConfig({
      actions: stubbedActions
    })).onTransition(nextState => {
      this.set('currentState', nextState);
    })

    return interpreter.start();
  },

() =>
      interpret(machine)
        .onTransition(state => {
          console.log('STATE:', state);
          // @ts-ignore
          setCurrent(state);
        })
        .onEvent(e => console.log('EVENT:', e))
        .start(),
    [machine]

function getService() {
    const service = serviceRef.current;
    if (service !== null) {
      return service;
    }
    const newService = interpret(machine);
    // workaround https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065
    ; (serviceRef.current as any) = newService;
    newService.onTransition(state => setStateSchema(state));
    newService.onChange(context => setContext(context));
    // call init after the above callbacks are set so any immediate actions
    // are reflected in react's state
    newService.init();
    return newService;
  }

state: StateChartState = (() => {
    const machine = toMachine(this.props.machine);
    return {
      current: machine.initialState,
      preview: undefined,
      previewEvent: undefined,
      view: "definition", // or 'state'
      machine: machine,
      code:
        typeof this.props.machine === "string"
          ? this.props.machine
          : `Machine(${JSON.stringify(machine.definition, null, 2)})`,
      toggledStates: {}
    };
  })();
  service = interpret(this.state.machine).onTransition(current => {
    this.setState({ current }, () => {
      if (this.state.previewEvent) {
        this.setState({
          preview: this.service.nextState(this.state.previewEvent)
        });
      }
    });
  });
  svgRef = React.createRef();
  componentDidMount() {
    this.service.start();
  }
  renderView() {
    const { view, current, machine, code } = this.state;

    switch (view) {

}

const StyledStateChart = styled.div`
  display: inline-grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto;
  font-family: sans-serif;
  font-size: 12px;
`;

export class StateChart extends React.Component {
  state = {
    current: this.props.machine.initialState,
    preview: undefined
  };
  interpreter = interpret(this.props.machine).onTransition(current => {
    this.setState({ current });
  });
  componentDidMount() {
    console.log(this.interpreter);
    this.interpreter.start();
  }
  render() {
    const { machine } = this.props;
    const { current, preview } = this.state;

    const stateNodes = machine.getStateNodes(current);
    const events = new Set();

    stateNodes.forEach(stateNode => {
      const potentialEvents = Object.keys(stateNode.on);

import * as React from 'react';
import {
  Machine as XstateMachine, State
} from 'xstate';
import { 
  interpret
} from 'xstate/lib/interpreter';
import {
  IState, IProps,
} from '../types'

class Machine extends React.Component {

  private machine = XstateMachine(this.props.config, this.props.options || {}, this.props.savedContext)

  service = interpret(this.machine)

  readonly state: IState = {
    machineStateNode: this.machine.initialState,
  }

  componentDidMount() {
    const { savedState } = this.props

    this.service = interpret(this.machine)
      .onTransition(nextState => {
        this.setState({ machineStateNode: nextState });
      });

    if (savedState) {
      const restoredState = State.create(savedState)
      this.service.start(restoredState)

componentDidMount() {
    const { savedState } = this.props

    this.service = interpret(this.machine)
      .onTransition(nextState => {
        this.setState({ machineStateNode: nextState });
      });

    if (savedState) {
      const restoredState = State.create(savedState)
      this.service.start(restoredState)
    }
    else this.service.start();
  }