I want to close the gif that is displayed in the text area by clicking on the close button, if I do that am not able to get the gif data again. so I want to select the gif every time I close the gif without refreshing.

import axios from "axios";
import { useState } from "react";
import { useEffect } from "react";
import "./componentsStyles/GifInText.css"
 
const GifInText = ({gifId}) => {

    const [post, setPost] = useState({});
    const [closeGif, setCloseGif] = useState(false)
     

    const fetchData = async () =>{
          await axios.get(`https://api.giphy.com/v1/gifs/${gifId}`,{
                params: { 
                    api_key: "Xoa3mXrWxKXw6lJscrKUTsbZsXLbGuGY",
                    gif_id: gifId
                }
            }).catch((error) =>{
                console.log("error at fetching gifID2", error);
              }).then(response => {
                setPost(response.data)
               
              });
            }
    useEffect(()=>{
        fetchData()
        }, [  ])

        

        return (
            <div className='gif-section'>   
            {post.data && (
                    <>
                    <div className='image-gifs'>
                     <i className="fas fa-times" onClick={()=>setCloseGif(!post)}></i>
                     <img className="live-gifs" src={post.data.images.fixed_height.url} alt="..."/>
                    </div>
                    </>
                )}
            </div> 
         )
}
export default GifInText;