Angular XState State Machine - Queries State - Doesn't use the event

state-machine-page.component.html

<h3>State Machine</h3>

<button (click)="moveBack()">Back</button>
<button (click)="moveNext()">Next</button>

<p>State: {{currentState}}</p>

state-machine-page.component.ts

import { Component, OnInit } from '@angular/core';
import { StateValue } from 'xstate';
import { StateMachineServiceService } from '../services/state-machine-service.service';

@Component({
  selector: 'app-state-machine-page',
  templateUrl: './state-machine-page.component.html',
  styleUrls: ['./state-machine-page.component.scss']
})
export class StateMachinePageComponent implements OnInit {

  stateValue: StateValue;
  currentState: string;

  constructor(private stateMachineService: StateMachineServiceService) { }

  ngOnInit(): void {
    this.stateValue = this.stateMachineService.getInitialState()
    this.currentState = this.stateValue.toString();
  }

  moveBack(){
    this.stateMachineService.back();
    this.stateValue = this.stateMachineService.getCurrentState();
    this.currentState = this.stateValue.toString();
  }

  moveNext(){
    this.stateMachineService.next();
    this.stateValue = this.stateMachineService.getCurrentState();
    this.currentState = this.stateValue.toString();
  }

}

state-machine-service.service.ts

import { Injectable } from '@angular/core';
import { createMachine, interpret } from 'xstate';

@Injectable({
  providedIn: 'root'
})
export class StateMachineServiceService {
  // Stateless machine definition
  // machine.transition(...) is a pure function used by the interpreter.
  toggleMachine = createMachine({
    id: 'toggle',
    initial: 'stage1',
    states: {
      stage1: {
        on: {
          NEXT: 'stage2'
        }
      },
      stage2: {
        on: {
          BACK: 'stage1',
          NEXT: 'stage3'
        }
      },
      stage3: {
        on: {
          BACK: 'stage2',
          NEXT: 'stage4'
        }
      },
      stage4: {
        on: {
          BACK: 'stage3',
        }
      }
    }
  });

  toggleService = interpret(this.toggleMachine)
    .onTransition((state) => {
      console.log(state.value);
      // Could send out events here.
    })
    .start();

  constructor() {
  }

  getInitialState() {
    return this.toggleService.initialState.value.toString();
  }

  back(){
    this.toggleService.send('BACK');
  }

  next() {
    this.toggleService.send('NEXT'); // 'inactive' / 'active' toggle
  }

  getCurrentState() {
    return this.toggleService.state.value;
  }


}