ReactJS: How to play video which comes in center and pause all other videos

In maplist I have 20 items that is 20 videos I want to do is play video which comes in center of viewport and pause all others and keep that behaviour throughout scrolling:

const [reels, setReels] = useState([]);
useEffect(() => {
  fetchAllVideos();
}, []);

const fetchAllVideos = async () => {
  const getAllVideosRes = await getAllVideos(pageNumber);
  setReels(getAllVideosRes);
};

return (
  <>
  reels.map((item, idx) => {
  return (
    <MDBox mb={3} key={idx}>
      <Card sx={{ borderRadius: "25px" }}>
        <video style={{ height: "100%", width: "100%", objectFit: "cover", borderRadius: "25px", }} loop controls>
          <source src={item.photo} type="video/mp4" />
        </video>
    </MDBox>
  </Card>
  </MDBox >
  );
  })

</>
)