Реагировать-звезда-рейтинг-компонент

Я создаю приложение для реагирования на фильмы, в котором я пытаюсь оценить каждый фильм. Проблема, с которой я столкнулся прямо сейчас, заключается в том, что я не могу оценивать каждый фильм отдельно. Когда я оцениваю один фильм, все фильмы получают одинаковую оценку. Есть идеи, как заставить его работать? Как я могу оценить каждый товар отдельно?

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      rating: 0
    };
  }

  onStarClick(nextValue) {
    this.setState({rating: nextValue
    });
  }

  render() {
   const { rating } = this.state;

    return (                
      <div>

        <h2>Top 10 movies</h2>
        {movies.map(c => (
          <div>
            <p key = {c.name}>
              {c.name}
            </p>
        <StarRatingComponent 
          name = "rate1" 
          starCount = {10}
          value = {rating}
          onStarClick = {this.onStarClick.bind(this)} 

        />
          </div>
        ))}
      </div>
    );
  }
}