How to detect overlapping images with any screen element using matter as default physics?

Phaser 3
1

I’m creating a game and I need to add shots, I managed to do that but now I don’t know how to detect the collision of these bullets with any other body.

var Bullet = new Phaser.Class({
  Extends: Phaser.GameObjects.Image,

  initialize: function Bullet(scene) {
    Phaser.GameObjects.Image.call(this, scene, 0, 0, "bullet")
    
    this.speed = Phaser.Math.GetSpeed(1000, 1)
    this.isFlip = false
  },

  fire: function (x, y, scaleX) {
    console.log(this)
    if (scaleX === -1) {
      this.isFlip = true
      this.setPosition(x - 50, y)
    } else {
      this.isFlip = false
      this.setPosition(x + 50, y)
    }
    
    this.setActive(true)
    this.setVisible(true)
  },
  
  update: function(time, delta) {
    if (!this.isFlip) {
      this.x += this.speed * delta

      if (this.x > 6000) {
        console.log("Exit screen")
        this.setActive(false)
        this.setVisible(false)
      }
    } else {
      this.x -= this.speed * delta

      if (this.x < -50) {
        console.log("Exit screen")
        this.setActive(false)
        this.setVisible(false)
      }
    }
  }
})

this.bullets = this.add.group({
    classType: Bullet,
    maxSize: 1000,
    runChildUpdate: true
})

Basically this code generates this:

ezgif.com-gif-maker

OBS: Observe well, the shots are small and in black color

Using the
var body = this.matter.add.image(100, 100, "image")

I can add a body to it, and the collision automatically works with my whole map:

body.setCircle(10)

However, I can’t add a body to detect collisions, as in the example above, is there any way to do this?