Functions not starting till scene restarts

the spawn pipe function ISNT ran every 3 seconds until the entire scene resets by the player dying.
here is my code(Simplified):

function create() {
    // PIPES //
    this.pipes = this.physics.add.group();
  
    this.physics.add.overlap(
      this.pipes,
      this.player,
      () => {
        this.scene.restart();
      }
    );
  
    var spawnPipeTimer = this.time.addEvent({
      delay: 3000,
      callback: this.spawnPipe,
      callbackScope: this,
      loop: true
    });
  
    this.spawnPipe = function () {
      var yOffset = ((Math.random() - 0.5) * 100) * 2
  
      var top_pipe = this.pipes.create(800, -50 + yOffset, 'top-pipe');
      var btm_pipe = this.pipes.create(800, 650 + yOffset, 'btm-pipe');

      this.pipes.add(top_pipe)
      this.pipes.add(btm_pipe)
    }
  
    this.firstPipeSpawned = false;
  }
  
  function update(t, dt) {
    if (this.firstPipeSpawned == false) {
      this.spawnPipe();
      this.firstPipeSpawned = true;
    }
    // Pipes //
    this.pipes.children.iterate(function(pipe) {
      pipe.setVelocityX(-120);
    });
  }

It looks like this.spawnPipe is undefined when addEvent() is called.

You can change it to a regular function, outside of create(), and it will work fine because of callbackScope.

function create() {
  // …
  var spawnPipeTimer = this.time.addEvent({
      delay: 3000,
      callback: spawnPipe,
      callbackScope: this,
      loop: true
  });
  // …
}

function spawnPipe() {
  // …
}