How to add custom local marker image to mapbox

I'm trying to add the local image as marker to mapbox (mapbox-gl: 2.9.2).

I can add marker from external url like https://placekitten.com/g/30/30, but can't add from local (from my project root dir). I'm using react.

My Attempts: (This shows nothing)

import myCatLogo from './assets/icons/my-cat-logo.png';

const imageCat: any = new Image(20, 20);
imageCat.src = myCatLogo;
map.addImage("myCat", imageCat);

map.addLayer({
    id: "marker",
    type: "symbol",
    source: "datas",
    layout: {
      "icon-image": "myCat",
      // "icon-size": [20, 20],
    }
});

My another attempts: (Uncaught (in promise) Error: Not Found at eval)

map.loadImage(myCatLogo, (error, image) => { // the image path is correct!
    if (error) throw error;
    map.addImage("myCat", image);
});

map.addLayer({
    id: "marker",
    type: "symbol",
    source: "datas",
    layout: {
      "icon-image": "myCat",
      // "icon-size": [20, 20],
    }
});

I can add other marker like circle:

  map.addLayer({
    id: "marker-circle",
    type: "circle",
    source: "datas",
    paint: {
      "circle-radius": 4,
      "circle-color": "rgb(0, 0, 0)",
    },
  });