Using Promise response from ArcGIS REST API with BitmapLayer (or alternative)

[alaws-USGS]

Hello, I am trying to use an API call to an ArcGIS REST API to create a BitmapLayer from the Export Map query of this endpoint.

Background
I am using a MapOverlay (DeckGLOverlay) to render the deck.gl layers inside of a MaplibreGl Map using react-map-libre. I am using the mapRef to dynamically create the API call for the image of layers. The code to create the layer currently looks like this:

// map context reference
const mapRef = useRef<MapRef>(null);

// construct the fetch call
const wbdSource = async () => {
  const params = new URLSearchParams({
    f: "image",
    format: "png32",
    transparent: "true",
    bboxSR: "4326",
    imageSR: "4326",
    bbox: bounds ? bounds.join(",") : "",
    size: `${mapRef.current?.getCanvas().width},${
      mapRef.current?.getCanvas().height
    }`,
    layers: "1,2,3,4,5",
    dynamicLayers: dynamicLayers,
  });
  return await fetch(
    `https://hydro.nationalmap.gov/arcgis/rest/services/wbd/MapServer/export?${params}`
  );
};

// list of layers
const layers: LayersList = [
new BitmapLayer({
      id: "wbd",
      image: wbdSource, // should return png
      bounds: bounds, //bounds come from useState, format of [number, number, number, number]
    }),
  ];

In another attempt, I tried constructing the URL and passing that to BitmapLayer

// list of layers
const layers: LayersList = [
new BitmapLayer({
      id: "wbd",
      image: wbdUrl, // should return png
      bounds: bounds, //bounds come from useState, format of [number, number, number, number]
    }),
  ];

When I log the formatted URL to the console, it results in a returned image in my browser (example).

I also looked into some of the underlying library functions, including loader.gl's ImageLoader, luma.gl's Texture, and how those fit with loading data with deck.gl.

Finally, when I use my current implementation, I get an error in the console; deck: matching of BitmapLayer({id: 'wbd'}): texture size deduction failed

Questions

1. Is BitmapLayer the best way for me to accomplish this? What props or approaches do I need to change/implement to make that happen?
2. Do I need to create my own custom layer and utilize ImageLoader to handle the implementation?
3. Any other considerations I should be making?

Thanks in advance!

[Pessimistress]

Supplying the URL works fine for me: https://codepen.io/Pessimistress/pen/wBBLpwB?editors=001

You cannot assign a function to the image prop. See accepted types here

[alaws-USGS]

@Pessimistress you are awesome! Your code helped me realize I need to call encodeURI for my created URL. It now looks like this and works dynamically:

// list of layers
const layers: LayersList = [
new BitmapLayer({
      id: "wbd",
      image: encodeURI(wbdUrl), // should return png
      bounds: bounds, //bounds come from useState, format of [number, number, number, number]
    }),
  ];