React (HTML) video tag won't autoplay on mobile devices

I created a jsx variable to embed a video into my html. Every other answer says to include

• muted
• defaultMuted, and
• playsinline

(which I already have).

The videos autoplay in safari, chrome and firefox on my computer, but not on mobile.

The start screen of the video loads, but it is paused.

Do I maybe need to do it slightly differently because I'm using React?

• I'm using an iPhone on iOS 13.3,
• the autoplay isn't working on safari, chrome and firefox, but only on mobile.
• The videos are all .mp4(.mov files also don't work).

var EmbedVideo = function(props) {
     return (
     <video webkit-playsinline playsinline autoplay="autoplay" className={props.className} muted defaultMuted loop>
            <source src={props.src} type="video/mp4" />
            Your browser does not support the video tag.
        </video>
    )
}

Update

So apparently 'muted' doesn't show up when I inspect the html of my website. The node looks like this. There's a few attributes that are missing actually.

    <video autoplay="" class="video" loop="">
    <source src="/videos/my_video.mp4" type="video/mp4">
    Your browser does not support the video tag.
    </video>

I'm reading something about the muted attributed not working with React? Someone made a component that looks like it's the video tag, but functioning how it's supposed to(at least in my case with videos playing like gifs). I can't get it working though, it's not even autoplaying on Desktop. I'm trying just <VideoTag src={props.src} /> because I don't know what their poster variable is supposed to be.

It looks like muted does not work properly when using React. I had to use something called dangerouslySetInnerHTML in order for muted to show up in the component.

var EmbedVideo = function(props) {
   return (
       <div dangerouslySetInnerHTML={{ __html: `
        <video
          loop
          muted
          autoplay
          playsinline
          src="${props.src}"
          class="${props.className}"
        />,
      ` }}></div>
   )
}