how to convert BLOB data type to Images in react

Question

hope you are fine. I am stuck at my university group project. I have mysql database in which I have tables which contains images, images in database are stored in BLOB data type. Now I want to convert BLOB into images and display it in my web page.Any help would be greatly appreciated. My code is below (logic.js) :

import React from 'react'
import  {useState, useEffect} from "react"
import Axios from 'axios';
import { Col, Card, Row, Button } from 'antd';
import 'antd/dist/antd.css';
import Buttonfilter from './Button';

const Logic = () => {

  const { Meta } = Card;

    const [foodList, setfoodList] = useState([]);
    const [clothesList, setclothesList] = useState([]);
    const [techList, settechList] = useState([]);
    const [Limit, setLimit] = useState(8);
    const [buttons, setButtons] = useState([])

   let [data, setData] = useState([])
    let [filter, setFilter] = useState([])
    useEffect(() => {
      Axios.get('http://localhost:3001/api/get/food').then((response) => {
       setfoodList(response.data);
      });
    }, []);
    
     useEffect(() => {
       Axios.get('http://localhost:3001/api/get/clothes').then((response) => {
        setclothesList(response.data);
       });
     }, []);
     
    useEffect(() => {
      Axios.get('http://localhost:3001/api/get/tech').then((response) => {
       settechList(response.data);
      });
    }, []);
   
    data = [...foodList, ...clothesList, ...techList]
    

    const onLoadMore = () => {     
      setLimit(Limit + 8);    
    }

    let handleToggle = (link) => {
      console.log(link)
      return (<a href = {link}/>)
    }


// //{<a href = {val.Link}>{URL.createObjectURL(val.Image)}</a>}
    let renderDefaultCards = data.slice(0, Limit).map((val, index) => {
      return <Col key={index} lg={6} md={8} xs={24}>
          <Card  
              onClick={() => handleToggle(val.Link)}
              hoverable={true}
              cover = {<a href = {val.Link} />}
          >
              <Meta
                  title={val.Company}
                  description={val.Description}
              />
          </Card>
      </Col>
    })

  let renderCards = filter.slice(0, Limit).map((val, index) => {
    return <Col key={index} lg={6} md={8} xs={24}>
        <Card      
           onClick={() => handleToggle(val.Link)}  
            hoverable={true}
            cover = {<a href = {val.Link} />}
        >
            <Meta
                title={val.Company}
                description={val.Description}
            />
        </Card>
    </Col>
})

//style={{ display: 'flex', height: '300px', justifyContent: 'center', alignItems: 'center' }}
    return (
        <div style = {{ width : '75%', margin: '3rem auto' }}>
            <div style = {{ textAlign: 'center' }}>
                <h2>Eco Friendly Companies </h2>
            </div>
            
            {/* {filter} */}
            <Button type = 'primary' onClick={() => {
                setFilter(data)
            }}>All</Button>
            <Button onClick={() => {
                setFilter(foodList)
            }}>Food</Button>
            <Button onClick={() => {
                setFilter(clothesList)
            }}>Clothes</Button>
            <Button onClick={() => {
                setFilter(techList)
            }}>Tech</Button>
                <br></br>
                <br></br>
                <br></br>
            {filter.length === 0 ?
                <div >
                    <Row gutter={[16, 16]}>
                        {renderDefaultCards}
                    </Row>
                </div> :
                <div>
                    <Row gutter={[16, 16]}>
                        {renderCards}
                    </Row>


                </div>
            }
           
      <br></br>
        <div style = {{ display: 'flex', justifyContent: 'center'}}>
            <button onClick={onLoadMore}>Load More</button>
        </div>

        </div>
    )
}

export default Logic

here's server side code using node js

const app = express();
const mysql = require('mysql');
const bodyParser = require('body-parser');
const cors = require('cors');

//connectivity with database
const db = mysql.createPool({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'ecoFriendly'
});

//Making middleware to reduce expected errors.
app.use(cors());
app.use(express.json());
app.use(bodyParser.urlencoded({extended: true}));

//get request for data stored in Food table in database
app.get('/api/get/food', (req,res) => {
    const sql = "SELECT * from Food";
    db.query(sql, (err, result) => {
        res.send(result);
    });
});

//get request for data stored in Clothes table in database
app.get('/api/get/clothes', (req,res) => {
    const sql = "SELECT * from Clothes";
    db.query(sql, (err, result) => {
        res.send(result);
    });
});

// //get request for data stored in Tech table in database
app.get('/api/get/tech', (req,res) => {
    const sql = "SELECT * from Tech";
    db.query(sql, (err, result) => {
        res.send(result);
    });
});

app.listen(3001, () => {
    console.log("running on port 3001");
});