Лучший способ передать данные в компоненты, создающие макет

Question

У меня есть базовый макет с главной и боковой панелью.Я могу перетаскивать строки в столбце боковой панели в основные столбцы.У меня есть массив столбцов, которые я использую для создания моего макета.Я хотел бы иметь один столбец, чтобы иметь боковую панель и 2 столбца, чтобы быть под основной.

Где был бы лучший способ отфильтровать боковую панель и отобразить ее отдельно?Ниже не работает, так как я пытаюсь просмотреть мой источник данных в функции рендеринга.

Вот мой код:

class App extends React.Component {
  onDragEndTabs = result => {
    this.props.dragFinished(result);
  };

  componentDidMount() {
    this.props.fetchTabs();
  }
  render() {
    const { tabs, columns, columnOrder } = this.props;
    const chromeTab = columnOrder.filter(columnId => columnId === 'chromeTabs');
    return (
      <DragDropContext onDragEnd={this.onDragEndTabs}>
        <Wrapper>
          {columnOrder.map(columnId => {
            return (
              <React.Fragment>
                <Main>
                  <Column
                    key={columns[columnId].id}
                    droppableId={columns[columnId].id}
                    column={columns[columnId]}
                    tabs={columns[columnId].tabs}
                    title={columns[columnId].title}
                  />
                </Main>
                <Sidebar>
                  <Column
                    key={chromeTab[0].id}
                    droppableId={chromeTab[0].id}
                    column={chromeTab[0]}
                    tabs={chromeTab[0].tabs}
                    title={chromeTab[0].title}
                  />
                </Sidebar>
              </React.Fragment>
            );
          })}
        </Wrapper>
      </DragDropContext>
    );
  }
}