CSS сетка: неправильное позиционирование

Question

Я пытался использовать CSS-сетку для позиционирования элементов. Я ожидаю что-то вроде этого с логотипом вверху, пустым, timePickr и кнопкой, и пустым:

  .    .      logo logo   .      .
  .    .       .    .     .      .
  . timePick   .    .   buttonOK .
  .    .       .    .     .      .

Но со следующим кодом у меня этого нет.

.wrapper{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 10vh 15vh 60vh 15vh;
  grid-gap: 10px;
  grid-template-areas:
  ". . logo logo . ."
  ". . . . . ."
  ". timePick . . buttonOK ."
  ". . . . . .";
  font-family: Helvetica;
  font-weight: bold
}

.logo{
  grid-area: logo;
}

.timePick{
  grid-area: timePick;
}

.buttonOK{
  grid-area: buttonOK;
}

.imLogo{
  object-fit: cover;
  width: 100%;
  max-height: 100%;
}

        <div class="wrapper">
            <div class="logo">
                <img class="imLogo" src="http://placehold.it/500x100" />
            </div>
            <div class="timePick">
                <h1> time </h1>
            </div>
            <div class= "buttonOK">
                <h1> button </h1>
            </div>
        </div>

Знаете ли вы, что не так с моим CSS?

---

EDIT

С фрагментом кода у меня ожидаемое поведение. Но в React у меня есть логотип вверху, а TimePick и Button - в самом низу справа Мой код точно такой же в React exept class -> className.

Вы знаете, как это исправить?