Элементы сетки CSS накладываются друг на друга вместо соблюдения области сетки

Ссылка на Code Sandbox: https://codesandbox.io/s/rw0j2orqmp

У меня есть следующая настройка шаблона сетки:

.calculator {
  margin: auto;
  vertical-align: center;
  width: 30%;
  height: 300px;
  background-color: blue;
  display: grid;
  grid-template-rows: repeat(5, auto);
  grid-template-columns: repeat(4, auto);
  grid-template-areas:
    "display display display display"
    "clear clear clear method"
    "number number number method"
    "number number number method"
    "number number number method"
    "posNeg number decimal method";

  #display {
    display: block;
    grid-area: display;
    margin: 5px;
    resize: none;
    text-align: right;
    font-size: 40px;
    width: 95%;
    height: 100px;
  }

  .clear {
    display: block;
    grid-area: clear;
  }

  .number {
    display: block;
    grid-area: number;
  }

  .method {
    display: block;
    grid-area: method;
  }

  .posNeg {
    display: block;
    grid-area: posNeg;
  }

  .decimal {
    display: block;
    grid-area: decimal;
  }
}

Все кнопки в каждом div генерируются следующим JSX в React:

function Calculator() {
  return (
    <div className = "container">
      <h1>Javascript Calculator</h1>
      <div className = "calculator">
        <textarea id = "display" />
        {types.map(y => (
          <div className = {y} key = {y}>
            {buttons.map(
              x =>
                x.type === y ? (
                  <button id = {x.id} key = {x.id}>
                    {x.name}
                  </button>
                ) : null
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

По какой-то причине мои div не соблюдают свое положение в области сетки и вместо этого все отображаются внизу, когда я устанавливаю их свойство grid-area. Я пробовал установить как display: block; в каждом классе div, а также я попытался установить позицию для нескольких разных значений в родительском классе. Изначально я создавал каждую кнопку автоматически, а обертывающие их блоки div не существовали, и когда это было так, каждая кнопка все еще отображалась внизу и занимала все нижние 50% элемента контейнера.

Вот как это выглядит: