Как правильно сделать выборку ref (React)?

Всем привет. Ребята, подскажите, пожалуйста, как сделать выборку ref.
Как мне вместо вот этого правильно выбрать коллекцию:
const list = [...document.querySelectorAll('.list__item')];
Идея в том, что при нажатии на next (например) мне необходимо первому list__item, например добавить class, и также второму.

import React from "react";

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

    this.state = {
      items: [
        {id: 1},
        {id: 2},
        {id: 3},
        {id: 4},
        {id: 5},
        {id: 6},
        {id: 7},
        {id: 8},
        {id: 9},
        {id: 10}
      ]
    };
  }

  nextHandler = () => {

  };

  prevHandler = () => {

  };

  render() {
    return (
      <React.Fragment>
        <ul className="list">
          {
            this.state.items.map((item) => {
              return (
                <li
                  key={item.id}
                  className="list__item"
                >
                  <div className="list__item">
                    key={item.id}
                  </div>
                </li>
              );
            })
          }
        </ul>

        <div className="controls">
          <button type="button" onClick={this.prevHandler}>prev</button>
          <button type="button" onClick={this.nextHandler}>next</button>
        </div>
      </React.Fragment>
    );
  }
};

export default App;