am creating facebook post page for my project, and almost done, but am not getting how to close the selected gif and once i close the selected gif am not able to get other gif. If any knows please help.

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;