Dragging container (cards) - issue with .on("dragend")

Phaser 3
1

Hi, I have a problem with dragging the container. I want to create a game where I can move/drag cards. When I use the “pointerdown” event the card goes to the mouse position, but I can not make it move and watch the position of the mouse. It just jumps to coordinates.

this method creates cards from word, each card contain one character and this works rly well

generateCardsWithWords(word) {
        this.ui.correctAnswer = [...word];
        this.ui.shuffeled = shuffleArray(this.ui.correctAnswer);

        this.ui.shuffeled.forEach((letter, index) => {
          const cardWrapper = [
            this.add
              .image(20, 10, "card")
              .setScale(0.65)
              .setInteractive({ cursor: "pointer" }),
            this.add
              .text(25, 25, letter, { ...defaultFont, fontSize: "120px" })
              .setOrigin(0.5),
          ];

          const cardContainer = this.add.container(
            this.cameras.main.width / 2 + index * 190,
            700,
            [...cardWrapper]
          );
          this.physics.world.enable(cardContainer);
          const singleCard = cardContainer.getBounds().width;
          const xContainerOffset = singleCard * this.ui.correctAnswer.length - 100;
          cardContainer.x -= xContainerOffset / 2;
          this.ui.cardGroup.add(cardContainer);
    }

    create() {
      this.ui = {
          data: getData()
          gameStage: 1,
          correctAnswer: null,
          shuffedAnswer: null,
          cardGroup: this.physics.add.group(),
          target: [],
          label: [],
        };

    this.generateCardsForWord(this.ui.data[0].word);

        this.ui.cardGroup.children.entries.forEach((card) => {
          card.first
            .setInteractive({ draggable: true })
             .on("pointerdown", function (pointer, dragX, dragY) {
            **THIS WORKS, BUT CARD JUMPS TO COORDINATES**

               card.x = pointer.x;
            card.y = pointer.y;
              console.log(pointer.x);
             })
             .on("drag", function (pointer, dragX, dragY) {
               **THIS DOESNT WORK**
               console.log(dragX);
               card.x = pointer.x;
               card.y = pointer.y;
             })
            .on("dragend", function (pointer, dragX, dragY, dropped) {
               **THIS DOESNT WORK**
              card.x = pointer.x;
              card.y = pointer.y;
            });
        });
    }