Jak wygenerować siatkę tylko raz?

const createGrids = ():Array<GridProps> => {
    const arr:Array<GridProps> = [];
    for(let i = 0; i < gridsInRow; i++) {
        for(let j = 0; j < gridsInCol; j++) {
            arr.push({
                color:colorsArr[Math.floor(Math.random() * colorsArr.length)],
                row: i,
                col: j,
                onDragStart: onDragStart,
                onDragDrop: onDragDrop,
                //key: i*9 + j,
            });
        }
    }
    console.log(arr.length, arr);
    return arr;
}

const [gridsArray, setGridsArray] = useState<GridProps[]>(createGrids);

const [gridsArray, setGridsArray] = useState<GridProps[]>([]);

function create()
{
  let arr = [];
  blebleble
  
  setGridsArray(() => arr);
}

create();

import { useState } from "react";
import Grid from "./Grid";
import { DragGridCalculations } from "./DragGridCalculations";

export const gridsInRow:number = 6;
export const gridsInCol:number = 3;

const colorsArr:Array<string> = ["red", "blue", "green", "yellow", "pink", "purple"];//, "orange"];
let indexStartDrag:number;

const dragCalc:DragGridCalculations = new DragGridCalculations();

export type GridProps = {
    color: string;
    row:number;
    col:number;
    onDragStart: (e:React.DragEvent<HTMLDivElement>) => void;
    onDragDrop: (e:React.DragEvent<HTMLDivElement>) => void;
    //key:number;
    //grid:GridProps;
} 

function GamePlan() {

    const onDragStart = (e:React.DragEvent<HTMLDivElement>) => {
        dragCalc.setGridStart(e);
        const target = e.target as HTMLDivElement;
        console.log(e);
        const row:number = Number(target.dataset.row); const col = Number(target.dataset.col);
        console.log(row + " a w tablicy to chyba : " + (row*gridsInCol + col));
        console.log("drag start " + row); //e.target.attributes.row.value);

        indexStartDrag = row*gridsInCol + col;
        console.log(indexStartDrag);
        e.stopPropagation();
    }

    const onDragDrop = (e:React.DragEvent<HTMLDivElement>) => {
        
        const target = e.target as HTMLDivElement;
        const dropRow:number = Number(target.dataset.row);
        const dropCol:number = Number(target.dataset.col);
        const indexDrop:number = dropRow*gridsInCol + Number(target.dataset.col);

        console.log("index drop: " + indexDrop + " a drop row: " + dropRow + " a drop col: " + dropCol);

        const tempStartDragGridObj:GridProps = gridsArray[indexStartDrag];
        const tempDropGridObj:GridProps = gridsArray[indexDrop];

        if(dragCalc.isAbleToMove(e))
        {
            tempDropGridObj.row = tempStartDragGridObj.row;
            tempDropGridObj.col = tempStartDragGridObj.col;
    
            tempStartDragGridObj.row = dropRow;
            tempStartDragGridObj.col = dropCol;
    
            const tempArr = gridsArray;
    
            tempArr[indexStartDrag] = tempDropGridObj;
            tempArr[indexDrop] = tempStartDragGridObj;

            
    
            //setGridsArray((prev) => tempArr);
            setGridsArray(() => [...tempArr]);

            dragCalc.checkGridsFit(gridsArray, e);
        }
        
    }


    const createGrids = ():Array<GridProps> => {
        const arr:Array<GridProps> = [];
        for(let i = 0; i < gridsInRow; i++) {
            for(let j = 0; j < gridsInCol; j++) {
                arr.push({
                    color:colorsArr[Math.floor(Math.random() * colorsArr.length)],
                    row: i,
                    col: j,
                    onDragStart: onDragStart,
                    onDragDrop: onDragDrop,
                    //key: i*9 + j,
                });
            }
        }
        console.log(arr.length, arr);
        return arr;
    }

    const [gridsArray, setGridsArray] = useState<GridProps[]>(createGrids);



    return (
        <div style={{display: "flex", flexWrap: "wrap", width: 560}}>
        {
            gridsArray.map((grid, index) => {
                return (
                    <Grid key={index} color={grid.color} row={grid.row} col={grid.col} onDragStart={onDragStart} onDragDrop={onDragDrop} />
                );
            })
        }

        </div>
    );
}
export default GamePlan;

import { DragEventHandler, ReactEventHandler } from "react";
import { GridProps } from "./GamePlan";

function Grid(props:GridProps) {

    const row:number = props.row;
    const col:number = props.col;
    const color:string = props.color;

    const onDragEnd = (e) => {
        console.log("drag end", e);
    }

    const onDragOver = (e) => {
        console.log("drag over " + e.clientX, e);
        e.preventDefault();
    }


    return (
        <div className="grid" 
        style={{backgroundColor: props.color}} 
        draggable={true} 
        onDragStart={props.onDragStart} 
        onDrop={props.onDragDrop} 
        onDragEnd={onDragEnd} 
        //onDragEnter={onDragEnter}
        //onDragOver={(e)=> e.preventDefault()}
        onDragOver={onDragOver}
        data-row={row} data-col={col}
        >
        </div>
    );
}

export default Grid;

for....
let grid = new Grid(color, row, col, blebleble);
arr.push(grid);

const target = e.target as HTMLDivElement;
const dropRow:number = Number(target.dataset.row);
const dropCol:number = Number(target.dataset.col);
const indexDrop:number = dropRow*gridsInCol + Number(target.dataset.col);

<div style={{display: "flex", flexWrap: "wrap", width: 560}}>
        {
            gridsArray.map((grid, index) => {
                return (
                    <Grid key={index} color={grid.color} row={grid.row} col={grid.col} onDragStart={onDragStart} onDragDrop={onDragDrop} />
                );
            })
        }

        </div>