React awesome slider doesn't show videos after the 3rd one

Question

<AutoplaySlider
   animation={animArr[animationName]}
   play={true}
   cancelOnInteraction={true}
   interval={6000}
   >
   <div>
      <a href="https://firstlink.com" target="_blank" rel="noreferrer">
         <video loop autoPlay muted>
            <source src={first} type="video/mp4" />
         </video>
      </a>
   </div>
   <div>
      <a href="https://secondlink" target="_blank" rel="noreferrer">
         <video loop autoPlay muted>
            <source src={second} type="video/mp4" />
         </video>
      </a>
   </div>
   <div>
      <a href="https://thirdlink.com" target="_blank" rel="noreferrer">
         <video loop autoPlay muted>
            <source src={third} type="video/mp4" />
         </video>
      </a>
   </div>
   <div>
      <a href="https://fourthlink.com" target="_blank" rel="noreferrer">
         <video loop autoPlay muted>
            <source src={fourth} type="video/mp4" />
         </video>
      </a>
   </div>
</AutoplaySlider>

This is my code, all the links are correct but the videos shows this way

First video = First video
Second video = Second video
Third video = First Video
Fourth video = Second video

what's going on?

Here is the package That I am using

https://caferati.me/demo/react-awesome-slider/images

Answer 1

Change source tag to src attribute ;)