Torture Dance easter egg firing 4 times and audio not playing

[Kerilet]

As the title implies, the easter egg that fires each time you type out the famous Konami Code is firing 4 times instead of 1, and the audio is not playing when it is supposed to. I used the same code as in HidroEletroCampinas's site, and I'd like some help here. I already searched online but couldnt find a satisfactory anwser.

Expected result:

Actual result:

App.js code:

[Kerilet]

Ok, you do some mistakes:

1. You can't use document.getElement* inside a react component. Instead, use it https://til.hashrocket.com/posts/hwybnwyfyz-get-a-ref-to-a-dom-element-with-react-hooks

2 - Konami code must be called after component has been rendered. On react hooks, call function inside a useEffect()

3 - Tip: create a separated component just to do it

4 - Video must be a "modal", that's mean it must be in front occupying 100% of screen like this:

[Kerilet]

Okay, did all of that except for the modal part. Since this is my first time using useRef(), I'd like some help because despite my efforts to use that, the function doesn't even fire unlike when I was using document.getElement*

Code (src/components/KonamiCode/index.jsx):

/* eslint-disable no-console */
import React, { useRef, useEffect } from 'react';
import style from './style.module.css';

export default () => {
  let codes1 = [];

  let tortureRef = useRef();

  const konamiKode = [
    'ArrowUp',
    'ArrowUp',
    'ArrowDown',
    'ArrowDown',
    'ArrowLeft',
    'ArrowRight',
    'ArrowLeft',
    'ArrowRight',
    'b',
    'a',
    'Enter',
  ].join('-');

  const writeKonamiCode = () => {
    tortureRef += '<img src="https://thumbs.gfycat.com/AllConstantChital-size_restricted.gif" alt="Konami Kode duuude!" loading="here\'s an easter egg!">';
  };

  const konamiCheck = (callback) => {
    document.addEventListener('keyup', (event) => {
      codes1.push(event.key);
      const joined = codes1.join('-');
      if (konamiKode.startsWith(joined)) {
        if (konamiKode === joined) {
          callback();
        }
      } else {
        codes1 = [];
      }
      console.log(joined);
    });
  };

  useEffect(() => {
    konamiCheck(writeKonamiCode);
  }, [codes1]);
  //   const audioRef = useRef(null);

  return (
    <>
      <div ref={tortureRef} className={style.easterEgg} />
    </>
  );
};

Console:

[jesse1983]

OK, I see the problem.

When you use React, you must forget use getElementById or element.innerHTML. To write something after a specific event, you need only control a state. For example, if you want to show a image, you just need create a state:

import React, { useState, useEffect } from 'react';

export default () => {
    const [showImage, setShowImage] = useState(false);

    useEffect(() => {
        // Put your code to change showImage value here
    }, []);
    return (
        <div className={style.easterEgg}>
            {showImage && <img src="https://thumbs.gfycat.com/AllConstantChital-size_restricted.gif" alt="Konami Kode duuude!" loading="here\'s an easter egg!" />}
        </div>
    );
};

Can you know I mean?