How to take a snapshot of gif?

Question

I want to create Thumbnail component to play gif from url. Before playing, I would like to use snapshot about the gif. Is it possible or is there any way to take snapshot of played gif?

My example component :

 import React, { useState, useEffect } from 'react'
            
  interface IProps {
      thumbnailPlayUrl: string;
  }
            
  export default function Thumbnail({ thumbnailPlayUrl }: IProps) {
  const [status, setstatus] = useState("stop")
            
  useEffect(() => {}, [])
            
  return (
                   
       <div onMouseLeave={() => setstatus("stop")}>
            
             <div  className="static" style={status == "play" ? {} : { display: "none" }} >
    
                     <img src={thumbnailPlayUrl} alt={thumbnailPlayUrl} />
    
             </div>
            
            
             <div  style={status == "play" ? { display: "none" } : {}} onMouseOver={() => setstatus("play")}>
                {/*
                   <img 
                    src={require("../../assets/images/video-play-icon-2.png")}  <---- Example with play icon 
                    alt={thumbnailSnapshotUrl} />
                 */}
    
                    <img 
                    src={"exampleThumbnailSnapshotUrl"} {/* <----- I want snapshot url here like .jpg , .png about */}
                    alt={"exampleThumbnailSnapshotUrl"} /> 
             </div>
            
       </div>
            
                   
                )
            }