Настроить размещение элементов в той же области GridTemplateArea

Question

У меня есть gridTemplateArea, который настроен следующим образом

    gridTemplateAreas: `
            'h h h'
            't d d'
          `,

't' - это раздел для списка элементов. В зависимости от выбора пользователя я также хочу показать набор вкладок с буквой «t» в верхней части списка. В настоящее время размещение компонента вкладок над компонентом списка отображает список вверху, а вкладки внизу, как я могу это изменить? Они настроены так:

       <TrayTabs
          className={classes.trayTabs}
          disabled={false}
          value={tab}
          onChange={handleTabChange}
          key="tray-header"
       />
      <TrayListContainer className={classes.tray}>

Каждый компонент имеет свой собственный стиль, но ни один из них не связан с его размещением, кроме gridArea: 't'. Их стили выглядят так

  trayTabs: {
    gridArea: 't',
  },
  tray: {
    gridArea: 't',
  },