Trying to map data from json file to netfix clone

Images I am trying to map data from my json file

export const products = [
    {
        name: 'iPhone 11',
        image: '/assets/images (7).jpeg',
        time: '1 hour 14mins',
        age: '+16',
        year: '1999',
        desc: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium hic rem eveniet error possimus, neque ex doloribus.',
        genre: 'Action',
        id: 0,
    },
    {
        name: 'iPhone 11',
        image: '/assets/images (13).jpeg',
        time: '1 hour 14mins',
        age: '+16',
        year: '1999',
        desc: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium hic rem eveniet error possimus, neque ex doloribus.',
        genre: 'Action',
        id: 1,
    },
    {
        name: 'iPhone 11',
        image: '/assets/images (14).jpeg',
        time: '1 hour 14mins',
        age: '+16',
        year: '1999',
        desc: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium hic rem eveniet error possimus, neque ex doloribus.',
        genre: 'Action',
        id: 2,
    }
]

to my netflix clone, when i map it and hover it the image hovers but the next image takes the position of the hovered image, sorry if the code is too long, its so you can get my point here is the code List.js and Listitem.js

import React from 'react'
import {
  ArrowBackIosOutlined,
  ArrowForwardIosOutlined,
} from "@material-ui/icons";
import { useRef, useState } from "react";
import ListItem from "../listItem/ListItem";
import "./list.scss";
import { products } from './listdata'

export default function List() {
  const [isMoved, setIsMoved] = useState(false);
  const [slideNumber, setSlideNumber] = useState(0);

  const listRef = useRef();

  const handleClick = (direction) => {
    setIsMoved(true);
    let distance = listRef.current.getBoundingClientRect().x - 50;
    if (direction === "left" && slideNumber > 0) {
      setSlideNumber(slideNumber - 1);
      listRef.current.style.transform = `translateX(${230 + distance}px)`;
    }
    if (direction === "right" && slideNumber < 5.6) {
      setSlideNumber(slideNumber + 1);
      listRef.current.style.transform = `translateX(${-230 + distance}px)`;
    }
  };
  return (
    <div className="list">
      <span className="listTitle">Continue to watch</span>
      <div className="wrapper">
        <ArrowBackIosOutlined
          className="sliderArrow left"
          onClick={() => handleClick("left")}
          style={{ display: !isMoved && "none" }}
        />
        <div className="container" ref={listRef}>
        {products.map((product) => (
          <div key={product.id}>
              <ListItem product={product} />
          </div>
          ))}
        </div>
        <ArrowForwardIosOutlined
          className="sliderArrow right"
          onClick={() => handleClick("right")}
        />
      </div>
    </div>
  );
}

import React from 'react'
import "./listItem.scss";
import trail from '../../assets/The Imperfects _ Official Trailer _ Netflix.mp4'
import {
  PlayArrow,
  Add,
  ThumbUpAltOutlined,
  Check,
} from "@material-ui/icons";
import { useState } from "react";
// import StyleSh
export default function ListItem({ product }) {
  const [isHovered, setIsHovered] = useState(false);
  const trailer = trail;
   const isTrue = product.id;
  return (
    <div
      className="listItem"
      style={{left: isHovered && product.id * 225 - 50 + product.id * 2.5}}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <img
        src={product.image}
        alt=""
      />
      {isHovered && (
        <>
          <video height='180px' src={trail} autoPlay={true} loop />
          <div className="itemInfo">
            <div className="icons">
              <PlayArrow className="icon" style={{color: 'black'}} />
              <Check className="icon" />
              <Add className="icon" />
              <ThumbUpAltOutlined className="icon" />
            </div>
            <div className="itemInfoTop">
              <span>{product.time}</span>
              <span className="limit">{product.age}</span>
              <span>{product.year}</span>
            </div>
            <div className="desc">
            {product.desc}
            </div>
            <div className="genre">{product.genre}</div>
          </div>
        </>
      )}
    </div>
  );
}

note am not using an API, I don't want to