[HELP] ReactJs (slider)

Boa noite! Meu código está dando erro: "Cannot read property 'classList' of undefined".

Botões

<button
                type="button"
                data-mdb-target="#carousel"
                data-mdb-slide="prev"
                onClick={() => { next(-1) }}
              >
                <span aria-hidden="true"> {ArrowLeft}</span>
                <span className="visually-hidden">Previous</span>
              </button>
              <button
                type="button"
                data-mdb-target="#carousel"
                data-mdb-slide="next"
                onClick={() => { next(1) }}
              >
                <span aria-hidden="true">{ArrowRight}</span>
                <span className="visually-hidden">Next</span>
</button>

A div onde eu quero exibir um item por vez a cada clique

 <div className="texto2">
          <div className="legenda">
            <h2>Alvarez $ Marshal 1</h2>
            <p>Noise can be energising but also disturb. It affects concentration, efficiency and productivity.</p>
          </div>
          <div className="legenda">
            <h2>Alvarez $ Marshal 2</h2>
            <p>Noise can be energising but also disturb. It affects concentration, efficiency and productivity.</p>
          </div>
          <div className="legenda">
            <h2>Alvarez $ Marshal 3</h2>
            <p>Noise can be energising but also disturb. It affects concentration, efficiency and productivity.</p>
          </div>
        </div>

E aqui está a função

var legendaIndex = 1;

function proxLegenda(n) {
  const legendas = document.getElementsByClassName("legenda-img");
  if (n > legendas.length) { legendaIndex = 1 }

  if (n < 1) { legendaIndex = legendas.length }

  for (let i = 0; i < legendas.length; i++) {
    legendas[i].classList.add("esconde");
  }
  legendas[legendaIndex - 1].classList.add("exibe")
}

function next(n) {
  proxLegenda(legendaIndex += n);
}

proxLegenda(legendaIndex);

Testei este codigo em JS puro e funcionou, então devo estar me passando em alguma coisa quando trago pro ambiente do React. Detalhe o erro é exatamente nesta linha :

legendas[legendaIndex - 1].classList.add("exibe");

O proprio intellisense vscode consegue identificar a prop "classList" mas quando roda, dá erro. No console também consigo capturar os elementos em questão, porém não consigo atribuir a classe.

Obrigado!