How to read GPU buffers on CPU (WebGPU, Javascript)

As the title suggests I need help reading buffers used on GPU on the CPU.

I am trying to accomplish mouse-picking for the objects drawn on screen.

To do this, I have created a Float32Array with the size (canvas.width * canvas.height) and I fill it with object ID inside the fragment shader.

I’m trying to use ‘copyBufferToBuffer’ to copy the GPU buffer to a mapped buffer,a long with some Async stuff.

I’m super new to this, (literally 2 days new.) The following is my code that handles all the copying. I keep getting an error in the console on Edge which says, ” Uncaught (in promise) TypeError: Failed to execute ‘mapAsync’ on ‘GPUBuffer’: Value is not of type ‘unsigned long’. “

async function ReadStagingBuffer(encoder){

  encoder.copyBufferToBuffer(
    entityRenderTextureBuffer[0],
    0,
    entityRenderTextureStagingBuffer,
    0,
    entitiesRenderArray.byteLength,
  );

  await entityRenderTextureStagingBuffer.mapAsync(
    GPUMapMode.read,
    0,
    entitiesRenderArray.byteLength,
  ).then(()=>{
    const copyArrayBuffer = entityRenderTextureStagingBuffer.getMappedRange(0, entitiesRenderArray.byteLength);
    const data = copyArrayBuffer.slice(0);
    entityRenderTextureStagingBuffer.unmap();
    console.log(new Float32Array(data));
  }) 
}

I don’t understand what the error is since the entity ids are defined as f32 storage with read_write capability in the shader.

  @group(0) @binding(4) var<storage, read_write> entityID : array<f32>;

I’ve tried changing the type of variable in the shader to a u32 instead of f32 but it still gives me the same error.
I tried to use a single read write value instead of a large array of values and it still gives me the same error.