**Vs = Versions/Instances

I'm getting a strange bug, essentially I'm building a quiz application, it has some parsing to get questions from a file, select one question at random, render it and it's choices on screen, at the end the user is able to upload their score to the database if they would like. I also have a component with a list of the highscores pulled from the prisma DB. The problem is that I'm getting the scores like such:

const getScores = () => {
    setHighscoresLoading(true);
    const res = fetch("./results/api")
      .then((data) => data.json())
      .then((json) => {
        const arr = Array.from<Score>(json);
        setCurrentHighscores(arr);
        setHighscoresLoading(false);
        return;
      });
  };

I also tried this with async await rather than fetch.then, no change, the issue is that the promise for some reason is causing my application to call the code at multiple instances in the future, for example I get 3 event listeners added to my buttons where as if I do anything else on the page, open the instructions menu (same exact logic as the highscores menu just the instructions is hardcoded rather than fetching data, it works perfectly), and click start, I only get one event listener added to the quiz div buttons, which is what I want. (It's a document.addEventListener checking the targets, so having multiple completely breaks and lags the application). Does anyone more experienced in react/next know why or how this may be happening? And how can I resolve the promise and not create another instance of the document/run inside the code? I'm sorry if this wording is really confusing please let me know if you'd like screenshots and/or code, any helps is much appreciated