How to rotate an image a particular direction in phaser 3 without affecting collision

Question

I’ve got a snake game (worm instead) and the movement works, press right arrow you go right etc. If it helps with question the live link rn is https://leons-worm-game.netlify.app/

However, I want to change the direction the head is facing when you do so. So if you turn right the head faces right etc. I managed to do it with:

this.head.angle = x However, now my collision is messed up and also the body (once it grows from eating) is positioned weirdly in relation to the head (I think the head is being messed up though, not the position of the body).

My face functions:

faceLeft: function () {
      if (this.direction === directions.UP || this.direction === directions.DOWN) {
        this.head.angle = 270;

        this.heading = directions.LEFT;
      }
    },

    faceRight: function () {
      if (this.direction === directions.UP || this.direction === directions.DOWN) {
        this.head.angle = 90;

        this.heading = directions.RIGHT;
      }
    },

    faceUp: function () {
      if (this.direction === directions.LEFT || this.direction === directions.RIGHT) {
        this.head.angle = 0;

        this.heading = directions.UP;
      }
    },

    faceDown: function () {
      if (this.direction === directions.LEFT || this.direction === directions.RIGHT) {
        this.head.angle = 180;

        this.heading = directions.DOWN;
      }
    },

Worm class:

 let Worm = new Phaser.Class({
    initialize: function Worm(scene, x, y) {
      this.headPosition = new Phaser.Geom.Point(x, y);

      this.body = scene.add.group();

      this.head = this.body.create(x * 20, y * 20, 'head');
      this.head.setOrigin(0);

      this.alive = true;

      this.speed = 100;

      this.moveTime = 0;

      this.tail = new Phaser.Geom.Point(x, y);

      this.heading = directions.RIGHT;
      this.direction = directions.RIGHT;
    },

Move function:

move: function (time) {
      /**
       * Based on the heading property we update headPosition.
       *
       * The Math.wrap call allows the worm to wrap around the screen when it goes of.
       */
      switch (this.heading) {
        case directions.LEFT:
          this.headPosition.x = Phaser.Math.Wrap(this.headPosition.x - 1, 0, 40);
          break;

        case directions.RIGHT:
          this.headPosition.x = Phaser.Math.Wrap(this.headPosition.x + 1, 0, 40);
          break;

        case directions.UP:
          this.headPosition.y = Phaser.Math.Wrap(this.headPosition.y - 1, 0, 30);
          break;

        case directions.DOWN:
          this.headPosition.y = Phaser.Math.Wrap(this.headPosition.y + 1, 0, 30);
          break;
      }

      this.direction = this.heading;

      //  Update the body segments
      Phaser.Actions.ShiftPosition(
        this.body.getChildren(),
        this.headPosition.x * 20,
        this.headPosition.y * 20,
        1,
        this.tail
      );

      //  Check to see if any of the body pieces have the same x/y as the head
      //  If they do, the head ran into the body so update snakes "alive" status

      let hitBody = Phaser.Actions.GetFirst(
        this.body.getChildren(),
        { x: this.head.x, y: this.head.y },
        1
      );

      if (hitBody) {
        game.sound.stopAll();
        deadEffect.play();