My app.css where i am initialising the grid

.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;
}

here is my app.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;

Here what are my expectations from this i have player which is nothing just a div which have a background color is a player form as of now i want once the program start the the player appear in the grid at some fixed location(as you can see in the css the grid 10,10) and have some buttons screen buttons by which i can move the player in desired location i do my own research first i try to it with vanila javascript there was a snake game code when i run that with my requirements my tab hangs this happens because of the a lot of rendering it was happening by animation rendering then i read some more there i get to learn i can assign their position but that gives the issue even if you assign the page not re render than i thought to choose react because it gives me some useful hooks but i cant use my normal vanila javascript code here