넷플릭스 오리지널 제외하고 슬라이드가 동작을 안합니다.

 <Row 
      title="Netflix ORIGINALS" 
      id="NO" 
      fetchUrl={requests.fetchNetflixOriginals}
      isLargeRow
      >
      </Row>

      <Row 
      title="Trending Now" 
      id="NO" 
      fetchUrl={requests.fetchTrending}
      >
      </Row>
       

return (
    <section className="row">
      <h2>{title}</h2>
      <div className="slider">
        <div className="slider__arrow-left">
          <span className="arrow" onClick={() => {
            document.getElementById(id).scrollLeft -= window.innerWidth - 80
          }}>{"<"}</span>
        </div>
        <div id={id} className="row__posters">
          {movies.map((movie) => (
            <img
              key={movie.id}
              className ={`row__poster ${isLargeRow && "row__posterLarge"}`}
              src={`https://image.tmdb.org/t/p/original/${isLargeRow ? movie.poster_path : movie.backdrop_path}`}
              alt={movie.name}
            >
            </img>
          ))}
        </div>
          <div className="slider__arrow-right">
            <span className="arrow" onClick={() => {
              document.getElementById(id).scrollLeft += window.innerWidth - 80
            }}>{">"}</span>
          </div>
      </div>
    </section>
  )

넷플릭스 오리지널에서는 슬라이드가 제대로 동작합니다.

그런데 아래 row들의 화살표를 클릭했을때 넷플릭스 오리지널 포스터의 슬라이드가 동작하는데 이유를 모르겠습니다.