I’m creating some buttons in React like this:

.square {
  font-size: 24px;
  font-weight: bold;
  height: 34px;
  text-align: center;
  width: 100%;
  flex-grow:1;
}
//JS file
import React from 'react';    

function Square({ value, onSquareClick }) {
  return (
    <button className="square" >
      {value}
    </button>
  );
}


export default function Game() {
  return (
    <>
    <Square value={1} />
    <div className="game">
        <Square value={1} />

      <div style= {{display:'flex', flexWrap: 'wrap', flexDirection: "row"}}>
        <Square />
        <Square />
        <Square />

      </div>
    </div>
    </>
  );
}

Why are the last three squares smashed into the far right? I was expecting all 5 buttons all having the same size.