Cómo ver una imagen en ReactJS de localhost

He utilizado PHPmyAdmin como mi localhost, Axios hacer backend funciones y reaccionar a mostrar en la página web, he creado una tabla que almacena un IDENTIFICADOR y un Blob, desde blob puede almacenar los datos de la imagen. He utilizado el estado de los ganchos y de representar cada uno de los elemento se muestra en la página, pero cuando me hacen la página, una imagen rota ha mostrado. Traté de consola.log() en que los datos de la imagen y se muestra como {type: 'Buffer', de datos: Array(50639)} en la consola del navegador.

En resumen, estoy tratando de recuperar una imagen de una tabla en el localhost y mostrarla en el navegador

Reaccionar

function ProjectCard() {

    const [projectCard, setProjectCard] = useState([]);

    const instance = axios.create( {
        baseURL: "http://localhost:3001/api",
    });

    useEffect(() => {
        instance.get("/getAvailableProjects").then((response) => {
            setProjectCard(response.data);
        });
    }, []);

    return (
        <div className="row g-4 py-4 border-bottom">
            {projectCard.map((val) => {
                return (
                    console.log(val.PROJECT_IMAGE) {/* displayed as {type: 'Buffer', data: Array(50639)} */}
                    <div className="col-lg-3 col-md-6 mb-2" key={val.PROJECT_ID}>
                        <img id="project-img" src={val.PROJECT_IMAGE} className="img-fluid" /> {/* BROKEN IMAGE */}
                    </div>
                );
            })}
       </div>
    )
};

export default ProjectCard;

Servidor

app.get("/api/getAvailableProjects", (req, res) => {

    const sqlQuery = "SELECT *,  from projectdetail";

    db.query(sqlQuery, (_error, result) => {
        res.send(result);
    });
});

Hay una manera de convertir este tipo de datos blob en una imagen real?