Typescript React draggable video widget

App.tsx

import VideoComponent from './VideoComponent';

function App() {
  return (
    <div className="App">
      <VideoComponent isVisible={false} videoUrl="https://path-to-your-video/video.mp4" />
    </div>
  );
}

export default App;

IVideoComponentProps.ts

export interface IVideoComponentProps {
  isVisible: boolean;
  videoUrl: string;
}

VideoComponent.module.scss

.videoComponent {
  position: absolute;
  top: 20px;
  left: 20px;
  border: 1px solid black;
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  z-index: 1000;
}

.closeButton {
  position: absolute;
  top: 5px;
  right: 5px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-size: 18px;
}

.video {
  max-width: 100%;
  height: auto;
}

.showVideo {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 10px;
  background-color: lightgray;
  border: 1px solid gray;
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
}

VideoComponent.tsx

import * as React from 'react';
import { IVideoComponentProps } from './IVideoComponentProps';
import styles from './VideoComponent.module.scss';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTimes } from '@fortawesome/free-solid-svg-icons';
import Draggable from 'react-draggable';

const VideoComponent: React.FC<IVideoComponentProps> = ({ isVisible, videoUrl }) => {
  const [isComponentVisible, setIsComponentVisible] = React.useState(isVisible);

  const handleClose = () => {
    setIsComponentVisible(false);
  };

  const handleShow = () => {
    setIsComponentVisible(true);
  };

  return (
    <>
      {isComponentVisible ? (
        <Draggable>
          <div className={`${styles.videoComponent}`}>
            <button className={styles.closeButton} onClick={handleClose}>
              <FontAwesomeIcon icon={faTimes} />
            </button>
            <video className={styles.video} src={videoUrl} controls />
          </div>
        </Draggable>
      ) : (
        <div className={styles.showVideo} onClick={handleShow}>
          Display Video
        </div>
      )}
    </>
  );
};

export default VideoComponent;