Mi app.css donde estoy inicializando la grilla

 .container{ min-height: 100vh; background-size: 100vw 100vh; background-repeat: no-repeat; display: flex; justify-content: center; align-items: center; background-color: aliceblue; } .board{ background: linear-gradient(rgb(170, 236, 170), rgb(236, 236, 167)); width: 90vmin; height: 92vmin; border: 2px solid black; display: grid; grid-template-rows: repeat(10, 1fr); grid-template-columns: repeat(10, 1fr); } .player{ background-color: black; }

aquí está mi aplicación.js

 import './App.css'; import './scripts/logic.js'; import Player from './components/Player' import { useState } from 'react' function App() { return ( <div className="App"> <div className="container"> <div className="board" id="board"> <Player/> </div> <button>Move Right</button> </div> </div> ); } export default App;

Aquí, ¿cuáles son mis expectativas de esto? Tengo un reproductor que no es más que un div que tiene un color de fondo. Es una forma de reproductor a partir de ahora. Quiero que una vez que se inicie el programa, el reproductor aparezca en la cuadrícula en algún lugar fijo (as you can see in the css the grid 10,10) y tengo algunos botones de pantalla con los que puedo mover al jugador a la ubicación deseada primero hago mi propia investigación lo intento con vanila javascript había un código de juego de serpiente cuando lo ejecuto con mi requisitos mi pestaña se bloquea esto sucede debido a la gran cantidad de representación que estaba ocurriendo mediante la representación de la animación, luego leo un poco más allí, puedo aprender que puedo asignar su posición, pero eso genera el problema incluso si asigna la página no se vuelve a representar que yo pensé en elegir reaccionar porque me da algunos ganchos útiles, pero no puedo usar mi código javascript normal de vanila aquí