Константин Подыганов

Функция компонент не возвращает

https://i.stack.imgur.com/F4wXq.png

function handleClick() {
  return <TimeTable />
}

Но я согласен, очень странный код. обработка нажатия смущает

Оставим TimeTable. Сделаем обработку в другом месте, допустим компонент

function App() {
  const [isSelect, setSelect] = useState(false)

  const handleClick = () => setSelect(prev => !prev)

  return <div>
<button onClick={handleClick}>Show</button>
<TimeTable isSelect={isSelect} /></div>
}

В теге flexbox, поэтому напишу:

.flex-box {
  display: flex;
}

.flex-item {
  width: 100%;
}

<div class="flex-box">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

Итого, 3 блока flex-item одинакового размера, который зависит от ширины flex-box

Попробуй font-size уменьшить