प्रतिक्रिया में एक 2d सरणी मानचित्रण

मेरे पास ग्रिडस्क्वायर नामक एक साधारण घटक है:

import React from 'react';
import './GridSquare.css'

const GridSquare = (props) => {
    
    return (
    <div className="empty-square">
    </div>
    )
}

export default GridSquare;

GridSquare की css फ़ाइल सिर्फ div को एक साधारण ग्रे वर्ग बना रही है:

.empty-square{
    display: inline-block;
    height: 30px;
    width: 30px;
    background-color: #555;  
}

मैं ग्रिड नामक एक घटक के साथ इन वर्गों का ग्रिड बनाने की कोशिश कर रहा हूं। मुझे 2d सरणी को मैप करने में कठिनाई हो रही है। एक आयामी सरणी का मानचित्रण ठीक काम करता है लेकिन 2d सरणी सिर्फ खाली divs को प्रिंट करता है।

import React from 'react';
import GridSquare from './GridSqure'

const GameGrid= () => {
    const gamegrid=new Array(20);
    for(let i =0; i<gamegrid.length; i++)
        gamegrid[i] = new Array(20);

    console.log(gamegrid);
    
    return(
        <div>
            {
            gamegrid.map((row)=> 
            {
                return (
                    <div>
                        {
                            row.map(() => <GridSquare/>)
                        }
                    </div>
                )})
            }
        </div>
    )
}

export default GameGrid;

मुझे किसकी याद आ रही है?