Как условно получить в useEffect

Мне удавалось получать новую цитату каждый раз при повторном рендеринге, но теперь я хочу добавить функцию, в которой у меня есть возможность воспроизводить одну и ту же цитату, а не получать новую, если я нажимаю кнопку повторного воспроизведения цитаты, однако я все еще хотите вызвать useEffect. Решение этого звучит очень прямолинейно, однако я не знаю, как подойти к нему с помощью useEffect в игре.

Кроме того, при использовании реакции лучше использовать ловушки ref вместо document.getElementByID ?

Ссылка на песочницу кода

import "./styles.css";
import { useEffect, useState } from "react";

async function newQuote() {
  const response = await fetch("https://api.quotable.io/random");
  const data = await response.json();

  return data.content;
}

async function genQuote() {
  document.getElementById("quoteDisplay").innerText = await newQuote();
}

export default function App() {
  const [quote, fecthNewQuote] = useState(0);

  useEffect(() => {
    genQuote();

    document.getElementById(
      "newQuoteCounter"
    ).innerText = `New Quote Counter: ${quote}`;

    document.getElementById("quoteReplayedCounter").innertext = ``;
  }, [quote]);

  console.info();

  return (
    <div className = "App">
      <div id = "quoteDisplay"></div>
      <div id = "newQuoteCounter">New Quote Counter: 0</div>
      <div id = "quoteReplayedCounter"> Quote Replayed Counter: 0 </div>
      <button id = "newQuoteButton" onClick = {() => fecthNewQuote((c) => c + 1)}>
        Fetch New Quote
      </button>
      <button id = "keepSameQuote">Keep Same Quote</button>
    </div>
  );
}