Así que aquí está mi código, me preguntaba por qué cada vez que hago clic en el botón, siempre devuelve un Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') ? ¿Cómo puedo resolver este caso?

 import React from "react"; export default function GameApp() { const score = 0; const firstNum = document.getElementById("card1"); const secondNum = document.getElementById("card2"); const thirdNum = document.getElementById("card3"); // starting the game function start() { firstNum.innerHTML = "First number: " + Math.floor(Math.random() * 13 + 1); secondNum.innerHTML = "Second number: " + Math.floor(Math.random() * 13 + 1); } function deal() { thirdNum.innerHTML = "Third number: " + Math.floor(Math.random() * 13 + 1); } return ( <div> <button onClick={start}> Start the game </button> <p id="card1"> </p> <p id="card2"> </p> <p id="card3"> </p> <button onClick={deal}> Deal </button> </div> ); }