Javascript 为什么我的react组件没有从另一个组件内部进行渲染

我想显示一个50x50单元格的网格.我创建了一个单元、棋盘和游戏组件.单元组件没有在电路板组件内呈现，所以我只看到一个蓝屏.我对此的react 是新的.求求你，我只是想了解和学习.谢谢

单元格组件:

export default function Cell({ value, colour, rowIndex, colIndex, clickAction }) {
      return (
        <div
          onClick={(e) => clickAction(e, rowIndex, colIndex)}
          style={{
            border: '1px solid black',
            display: 'flex',
            placeContent: 'center center',
            alignItems: 'center',
            backgroundColor: colour,
          }}
        >{value}
        </div>
      )
}

电路板组件:

import '../App.css'

export default function Board({ row, column, pix }) {
      return (
        <div style={{
          display: 'grid',
          gridTemplateColumns: `repeat(50, 25px)`,
          gridTemplateRows: `repeat(50, 25px)`,
        }}>
        </div>
      )
}

游戏组件:

import Cell from './Components/Cell'
import Board from './Components/Board'
import { useState } from 'react'
import './App.css'

export default function Game() {
      const boardDimensions = {
        width: 50,
        height: 50
      }
    
      const array2D = Array(boardDimensions.height).fill().map((row) => Array(boardDimensions.width).fill(0))
      const [fiboCells, setFiboCells] = useState(array2D)
    
      return (
        <div className="center">
          <Board row={50} column={50} pix={25}>
            {
              fiboCells.map((row, i) => row.map((col, j) => (
                <Cell
                  value={col}
                  rowIndex={i}
                  colIndex={j}
                  colour="red"
                />
              )))
            }
          </Board>
        </div>
      )
}

应用程序组件:

import './App.css';
import Game from './Game'

function App() {
      return (
        <Game/>
      );
}

export default App;

App.css:

.center {
  display: flex;
  place-content: center center;
  align-items: center;
  flex-direction: column;
  background-color: #00308F;
  height: 100vh;
  font-size: 12px;
}

我希望看到一个50x50的零格子