how to fetch data and tag Element but not json data using axios from php Apache server in XAMP?

Question

I have a front end code of react is

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



export default function DataGridDemo() {
  const[dataServer,setDataServer]=useState(null);

  useEffect(()=>{
    const url = 'http://localhost/sham/Sample.php/'
    axios.get(url).then(response => response.data)
    .then((data) => {
     
      setDataServer(data);
      console.log( "respose for server data " ,dataServer);
     })
  

  })

   
  


  return (
    <div className="row mt-5">
     
     
       <Sample data={dataServer}/>
     
    </div>
  );
}

 export function Sample({data}){
  return <div>

    {<p>{data}</p>}
  </div>
}

the Backend code is like this

// code of Backend php

<?php
   header("Access-Control-Allow-Origin: *");
   header("Access-Control-Expose-Headers: Content-Length, X-JSON");
  header("Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS");
   header("Access-Control-Allow-Headers: *");

// the code response data to clients
echo ("<h1> hello world I am From Php server</h1>");
echo("<img 
src='https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg' 
alt='Flowers'>")
?>

But The out put is in my react server (in crome broswer ) is like this

**

<h1> hello world I am From Php server</h1><img src='https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg' alt='Flowers'>

---

** the browser not interpreted but display like text.