create image in React from backend dataURL

Question

I'm trying to get a snapshot of HTML canvas like so:

    const canvas = canvasRef.current
    let image = canvas.toDataURL('image/jpeg');
    await axios.post('/api/entries/', { dataURL: image })

which seems to be working, and connected properly to the database.

But I can't figure out how to use the dataURL to create an image component on the React frontend

I'm able to fetch them from the backend just fine and log the dataURL.

    const pics = await axios.get('/api/entries/')
    pics.data.map((pic) => { console.log(pic.dataURL) })

I guess I'm just not sure of the next steps to get each dataURL into a element

Here is my getPics function:

  const getPics = async () => {
    const pics = await axios.get('/api/entries/')

    return (
      pics.data.map((pic) => (
        <img src={pic.dataURL} key={pic.dataURL} />
      ))
    )
  }

and its used just like:

<div>
  {getPics()}
</div>