React bootstrap carousel not showing static video but audio is working, slides are present

import React from 'react';

import Carousel from 'react-bootstrap/Carousel';
import 'bootstrap/dist/css/bootstrap.min.css';
import { videoCarouselData } from './carouselData';
import Video from './Video';

const VideoCarousel = () => {
  return (
    <Carousel>
      {videoCarouselData.map((videoItem, index) => {
        return (
          <Carousel.Item key={index}>
            <Video video={videoItem.video} title={videoItem.title} />
            <Carousel.Caption>
              <h3>{videoItem.title}</h3>
              <p>{videoItem.detail}</p>
            </Carousel.Caption>
          </Carousel.Item>
        );
      })}
    </Carousel>
  );
};

export default VideoCarousel;

import React from 'react';
import { VideoContainer, VideoFile, VideoWrapper } from './VideoElements';
import Vid1 from '../../res/video/Alostro.mp4';

const Video = ({ video, title }) => {
  return (
    <>
      <VideoContainer>
        <VideoWrapper>
          <VideoFile
            width='560'
            height='315'
            src={video}
            title={title}
            frameborder='0'
            allowFullScreen
          />
          {console.log(video)}
        </VideoWrapper>
      </VideoContainer>
    </>
  );
};

export default Video;

import styled from 'styled-components';

export const VideoContainer = styled.div`
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
  /* width: 100vw;
  height: 100vh; */
`;

export const VideoWrapper = styled.div`
  position: relative;
  /* padding-bottom: 56.25%; 16:9 */
  height: 0;
`;

export const VideoFile = styled.iframe`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  border:0;

  @media (min-aspect-ratio: 16/9) {
    /* height = 100 * (9 / 16) = 56.25 */
    height: 56.25vw;
  }

  @media (max-aspect-ratio: 16/9) {
    /* width = 100 / (9 / 16) = 177.777777 */
    width: 177.78vh;
  }
`;

import React from 'react';
import PictureCarousel from '../Components/PictureCarousel/PictureCarousel';
import { pictureCarouselData } from '../Components/PictureCarousel/pictureCarouselData';

import VideoCarousel from '../Components/VideoCarousel/Carousel';
import { videoCarouselData } from '../Components/VideoCarousel/carouselData';
import Video from '../Components/VideoCarousel/Video';

const Home = () => {
  return (
    <>
      <VideoCarousel />
      {/* <Video /> */}
      {/* <PictureCarousel slides={pictureCarouselData} /> */}
    </>
  );
};

export default Home;
Where video carousel will be rendered.