Affichage des données a partir d'un api avec react

Bonjour,

je fait appel a un api pour afficher les nombre cas covid le nombre de cas vacciné le nombre de deces:
mais j'ai rien ne m'affiche quand je fait console.log(data) ca m'affiche sur la console du navigateur mais pour afficher sur la page web ca marche pas quelqu'un peut me donner une idée.


voici ce qui M'affiche sur la console du navigateur






voici mon code:

import { useState } from "react";
import { Button, Card, Container, Input, Message, Select } from "semantic-ui-react";

const Recherche=()=>{

 
    
    const [prov, setProv] = useState("");
    const [stat, setStat] = useState("");
    const [erreur, setErreur] = useState("");
    const [date,setDate]=useState("")   ;
    const [data,setData]=useState([])   ;
 
   console.log(data)
    console.log(stat)
    console.log(prov)
    console.log(date)

    const renderPays = () => {
             return (
                <Card  >
                    <div className="cas">
                     <Card.Content>
                         
                        <Card.Header>
                        {Object.values(data)[0] && Object.values(Object.values(data)[0])[0]}                                       
                       </Card.Header>
 
                    </Card.Content>
                    </div>
                     <div className="rec">
                     <Card.Content>
                         
                        <Card.Header>
                                                            </Card.Header>
 
                    </Card.Content>
                    </div>

                </Card>)
       

    }
     const appelerAPI = () => {

        if(stat!==0){
    
        fetch(`https://api.opencovid.ca/timeseries?loc=${prov}&date=${date}`)
            .then((response) =>
             response.json())
              .then((data) =>{setData(data)})
              .catch((er) => setErreur(er));
        
        }
        else{
            <Message>helleo</Message>
        }  
    };
    

     

return(<div className="recherche">

<Container>
 

            <select id="MenuDeroulant" class="ui dropdown" onClick={(e) => setProv(e.target.value)}>
                 <option value="QC">QUEBEC</option>
                <option value="ON">ONTARIO</option>
              
            </select>

<Input type="date" value={date} onChange={(e) => { setDate(e.target.value) }}></Input>

 
 <Button primary onClick={appelerAPI}> Lancer la recherche </Button>
<Button secondary> Vider la recherche </Button>

  
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", width: "100%" }}>
                {data.length > 0 ? renderPays() :<Message warning>il y  a rien </Message>}
                
             </div>
 
</Container>
</div>)

}

export default Recherche;