tetrominoes | Play a game of Tetrominoes built with MonoGame | Game Engine library

I am creating a simple Tetris game using React JS. My main Component besides App.js is a Tetris.js functional component. In useEffect() I am storing components like the stage or current player tetromino using Local Storage. While playing, retrieving data in the console is possible and the data is not null.

Learning JavaScript by making a tetris game.

Problem: When I try to move (left, right or down from the starting position) a piece and then rotate it, then the rotated piece stretches appart. When I go back with it t the starting position, everything works fine. Also when I do not rotate the piece but only move it to the left/right/down then everything is also fine. Am thinking that I have the center of rotation ankered to the grid but not to the piece.

Here you can play the game: Here

Here is my github: Here

Temporary controlls:

Enter and after up arrow: start the game

left arrow: move left

right arrow: move right

up arrow: rotate

down arrow: move one row down

Description:

My tetrominoes and my grid are made of arrays (class based). The grid comes from SimpleBlock{} and GridBlock{}. My tetrominoes are made by Simple Block{} and

I working on this Tetrisapp with hooks, I want to move one step ahead I want to add current TETROMINOES shape to side display I found that shapes are generating through src > component > where type is creating a TETROMINOES, I want to add this to display so it can show current TETROMINOES here https://codesandbox.io/s/ruhew link for playground I found online. I want to add a small display after start game button

any help would be appreciated Thanks in advance