Problema de exibição nos componentes React. Tamanhos inesperados ao usar flexbox

Estou iniciando um aplicativo de teste simples usando NextJS/React.

Abaixo está o código:

O conteúdo do arquivo Board.tsx:

import './Board.css';

export default function Board() {
    return <div className="board">
    <Row/>
    <Row/>
    <Row/>
  </div>
} /* End of Board */

function Row() {
    return <div className="row">
    <Cell/>
    <Cell/>
    <Cell/>
  </div>
} /* End of Row */

function Cell() {
    return <div className="cell"/>
} /* End of Cell */

E o conteúdo do arquivo Board.css:

.cell {
  width: 3rem;
  height: 3rem;
  background-color: rgb(255, 255, 0);
  border-width: 2px;
  border-color: rgb(55, 55, 55);
  margin: 11%;
}

.row {
  display: flex;
  flex-direction: row;
}

.board {
  display: flex;
  flex-direction: column;
}

No topo está o arquivo app/page.tsx:

import Image from 'next/image'
import Board from './components/Board'

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      X4C APP
      <Board/>
    </main>
  )
}

Aqui está o que aparece no navegador da web ao executar o aplicativo:

Finalmente tenho uma pergunta. Por que não vemos quadrados amarelos perfeitos, quando o CSS indica uma largura e altura fixas para o componente da célula?

Posso ver, experimentando, que se eu remover os dois blocos

.row {...}
.board {...}

do arquivo Board.css, obtenho quadrados perfeitos.

Então, o que está causando esse problema nesses dois blocos?