Convert Hex to base64 in react js – Blancer.com Tutorials and projects

I am Fetch thumbnail path from localhost 8080 and wanted to convert it into hex to base64 (Already a hex coded ) and then show the image. how this Is done in react js and display the image in the IMG tag. please help
//CODE
import React, { Component } from "react";
import ReactDOM from "react-dom";
import ColumnResizer from "column-resizer";
import "./table.css"
import axios from "axios";  
   
class ReactTable extends Component {
  constructor(props) {
    super(props);
    this.tableSelector = "#somethingUnique";
    this.state = {
      Data: [],
      Data1: [],
      error: '',
      image: [],
    }
  }    
  //Fetching Api through LocalHost8080
  getFetchData() {
    axios.get(' /AmpRestAPI/webresources/getPCRList/all',
      {
        headers: {
          'Access-Control-Allow-Origin': '*',
        },
        auth: {
          username: 'admin',
          password: 'password'
        }
      })
      .then(async (response) => {
        console.log(response.data);
        this.setState({ Data: response.data });

      }).catch(error => {
        this.setState({ error: 'unable to fetch URL' });
        console.log(error.response);
      });
  }          
  componentDidMount() {    
    if (this.props.resizable) {
      this.enableResize();
      this.getFetchData();
    }
  }   
  render() {
    const { Data, error } = this.state
    return (
      <div>

        <div className="container-fluid pt-3">
          <table id="somethingUnique" cellSpacing="0" className="border-primary">
            <thead>                  
            </thead>
            <tbody>
              {Data.length ?
                Data.map((val, index) => {
                  //flitter
                  const filterValue = this.props.filterValue;
                  const emplogin = val.ChannelName.toLowerCase();
                  // const emptype = emp.type;
                  if (((!filterValue) || (emplogin.indexOf(filterValue) !== -1))) {
                    return (
                      <tr key={index}>
                        <td>
                          {this.state.image ? <img src={`data:image/jpeg;base64,${val.Thumbnail}`} alt="Clip Thumbnail" width="100%" height="100%" /> : ''}
                        </td>
                        <td>
                            {val.ChannelName}
                         </td>
                        <td>{val.Duration}  </td>                       
                          <td>  {val.EndTime}
                          </td>
                        <td>
                            {val.LoadedClip}
                         </td>
                        <td>
                            {val.StartTime}
                         </td>

                        <td>
                            {val.CurrentTimeStamp}
                        </td>
                      </tr>
            )
                  }
            return true;
                }
            ) : null
              }
          </tbody>
        </table>
        {
          error ? <div className="text-center pt-4"><h5>{error}</h5></div> : null
        }
      </div >
      </div >
    );
  }
}    
export default ReactTable;