how to trigger "react bootstrap modal" (containing intro.gif) and close modal after intro.gif finishes?

Question

i want to trigger Modal (containing intro.gif) in Electron React Boiletplate on application start, and the modal should close after "intro.gif" finishes.

below is what I've tried so far. Home.tsx

import { useState } from 'react';
import { Button, Modal } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import Intro from '../../../assets/intro.gif';

function ModalComp() {
  const values = [true, 'sm-down', 'md-down', 'lg-down', 'xl-down', 'xxl-down'];
  const [fullscreen, setFullscreen] = useState(true);
  const [show, setShow] = useState(false);

  function handleShow(breakpoint) {
    setFullscreen(breakpoint);
    setShow(true);
  }
  return (
    <>
      {values.map((v, idx) => (
        <Button key={idx} className="me-2 mb-2" onClick={() => handleShow(v)}>
          Full screen
          {typeof v === 'string' && `below ${v.split('-')[0]}`}
        </Button>
      ))}
      <Modal show={show} fullscreen={fullscreen} onHide={() => setShow(false)}>
        <img src={Intro} className="img-fluid" alt="" />
      </Modal>
    </>
  );
}

function Home() {
  return (
    <div>
      {/* modal start */}
      <ModalComp />
      {/* modal end */}
    </div>
  );
}

export default Home;