Video is not autoplaying regardless of having autoplay and muted in reactJS

I've some works data of which one is shown

const works = [
  {
    id: 1,
    title: "title",
    domain: "dom",
    bgColor: "#F7FCFF",
    description:
      "desc",
    gif: false,
    mobGif: false,
    video:
      "url.mp4",
    mobVideo:
      "url.mp4",
    link: "/link",
  }]

I've 4 such works, all have exactly same keys, i tested the video urls, all of them work There is a carousel like component and all the videos play except for one video. If i change it's position from second to any other even that video plays but if it's in second position it doesnt play :).

{works.map((work) =>
          work.gif ? (
            <div
              class={`hidden md:block ${
                work.id < activeWork.id
                  ? "-translate-x-full  bg-center md:bg-left"
                  : work.id > activeWork.id
                  ? " translate-x-[100%]  bg-center md:bg-right"
                  : "bg-center scale-125 "
              }  w-full bg-cover bg-no-repeat ease-linear transition-all  duration-700  h-screen    absolute
             w-100 md:w-screen   md:object-cover  bg-red-100  `}
            >
              <img
                alt="hi"
                className="w-full h-full object-cover bg-cover object-right"
                autoPlay
                src={work.video}
                // alt="loading..."
              />
              <div class="absolute w-full h-full bg-black opacity-50 left-0 top-0"></div>
            </div>
          ) : (
            <div
              class={`hidden md:block ${
                work.id < activeWork.id
                  ? "-translate-x-full  bg-center md:bg-left"
                  : work.id > activeWork.id
                  ? " translate-x-[100%]  bg-center md:bg-right"
                  : "bg-center scale-125 "
              }  w-full bg-cover bg-no-repeat ease-linear transition-all  duration-700    h-screen   absolute
               w-100 md:w-screen  md:opacity-100 opacity-100 md:object-cover   `}
            >
              <video
                className="w-full h-full object-cover object-center  "
                loop
                // autoPlay={activeWork.id === work.id ? true : false}
                autoPlay
                muted
              >
                <source src={work.video} type="video/mp4" />
              </video>
              <div class="absolute w-full h-full bg-black opacity-50 left-0 top-0"></div>
            </div>
          )
        )}

I did check the autoplay status while updating the state and it's working, i compared it with the previous and next carousel and it's working exactly same but the video doesnt play.