How to use the @xstate/fsm.interpret function in @xstate/fsm

interpret(chart, options) {
    chart = this.prepareChart(chart);
    const service = interpret(this.machine(chart, options));
    // returns subscription
    service.subscribe(state => {
      if (state.changed) {
        this.log(chart, state);
        options.onTransition(state);
      }
    });
    return service;
  }

interpret: function(chart, options) {
    chart = this.prepareChart(chart);
    const service = interpret(this.machine(chart, options));
    // returns subscription
    service.subscribe(state => {
      if (state.changed) {
        this.log(chart, state);
        options.onTransition(state);
      }
    });
    return service;
  },
  guards: function(chart) {

export function useMachine(
  stateMachine: StateMachine.Machine
): [
  StateMachine.State,
  StateMachine.Service['send'],
  StateMachine.Service
] {
  const [state, setState] = useState(stateMachine.initialState);
  const ref = useRef | null>(null);

  if (ref.current === null) {
    ref.current = interpret(stateMachine);
  }

  useEffect(() => {
    if (!ref.current) {
      return;
    }

    ref.current.subscribe(setState);
    ref.current.start();

    return () => {
      ref.current!.stop();
      // reset so next call re-initializes
      ref.current = null;
    };
  }, [stateMachine]);

export function useMachine(
  stateMachine: StateMachine.Machine
): {
  state: Ref>;
  send: StateMachine.Service['send'];
  service: StateMachine.Service;
} {
  const state = ref>(stateMachine.initialState);
  const service = interpret(stateMachine);
  const send = (event: TE | TE['type']) => service.send(event);

  service.subscribe(s => (state.value = s));
  service.start();

  onBeforeUnmount(() => {
    service.stop();
  });

  return { state, send, service };
}