Trying to display IMG with src set to Binary/Buffer image data from Mongoose

Trying to display IMGs with React/JSX with Buffered/Binary data saved to my MongoDB/Mongoose database.

i iterate over the data array with the IMG element looking like this:

<img src={`data:${item.img.contentType};base64,${item.img.data.data.toString("base64")}`} alt="" />

import React, { useState, useEffect } from "react";
import axios from "axios";

const FilesUpload = () => {
  const [allPics, setAllPics] = useState([]);

  useEffect(() => {
    const getPics = async () => {
      let res = await axios.get("http://localhost:8080/");
      setAllPics(res.data);
    };
    // query the server for all of the picture objects
    getPics();
  }, []);

  const [state, setState] = useState({});

  const handleChange = (e) => {
    e.preventDefault();
    setState(e.target.value);
    console.log(state);
  };

  return (
    <>
      <h1>upload an image</h1>
      <hr />
      <div>
        <form
          action="http://localhost:8080/"
          method="POST"
          encType="multipart/form-data"
        >
          <div>
            <label>Image Title</label>
            <input type="text" id="name" placeholder="Name" name="name" onChange={handleChange} value={state.name}/>
          </div>
          <div>
            <label htmlFor="desc">Image Description</label>
            <textarea id="desc" name="desc" rows="2" placeholder="Description"
              onChange={handleChange} value={state.desc}/>
          </div>
          <div>
            <label htmlFor="image">Upload Image</label>
            <input type="file" id="image" name="image" required />
          </div>
          <div>
            <button type="submit">Submit</button>
          </div>
        </form>
      </div>

      {allPics.length > 0 ? (
        <div>
          {allPics.map((item, index) => (
            <div key={index}>
              <div>
                <img src={`data:${item.img.contentType};base64,${item.img.data.data.toString("base64")}`} alt="" />
              </div>
            </div>
          ))}
        </div>
      ) : (
        <>
          <hr />
          <br />
          <h1>uploaded files</h1>
          <h5>Loading..</h5>
        </>
      )}
    </>
  );
};

export default FilesUpload;

but I always get ERR_INVALID_URL:

from similar threads on the net I've read that I need to take those comma-delimitated values and remove the comma which will give me the proper data. having a hard time figuring that out. any help would be great. thanks