How do I move my active pointer with the camera scroll?

Phaser 3
1

I am creating a platformer game using a tilemap for level design. I then have a camera that follows the player when he moves from the starting area.

My problem comes in my function that is called when the mouse is clicked. This works fine in the game’s starting bounds, but when I move my sprite and the camera moves, and I click, my function always fires towards the start position. How do I fix this?

Here’s some code

        create{
        //Add a camera to follow us around the world
        const camera = this.cameras.main;
        //Camera shouldn't move outside our tilemap
        camera.setBounds(0, 0, map.widthInPixels, map.heightInPixels);

        //..........code to create this.hero is here

        //Camera needs to follow the player
        camera.startFollow(this.hero);
        //On click
        this.input.on("pointerdown", this.fire, this); 
        }
        fire(e) {
            if(this.web) {
            this.releaseWeb();
        }
        else {
            //Calculate the angle
            let angle = Phaser.Math.Angle.Between(this.hero.body.position.x, this.hero.body.position.y, e.position.x, e.position.y);

            this.box = this.matter.add.rectangle(this.hero.body.position.x + (heroSize * 2) * Math.cos(angle), this.hero.body.position.y + (heroSize * 2) * Math.sin(angle), 20, 20, '#ffffff'); } ```