将React组件添加到Elastic Search UI

如何解决将React组件添加到Elastic Search UI

我正在使用Elastic Search进行搜索，其当前外观如下：

不幸的是，我需要收集的用户信息多于构建Elastic Search的用户信息。因此，我想在图片中的大搜索框上方添加另一个输入框以及一个下拉菜单。

可悲的是，我几乎没有使用React的经验。因此，作为初学者，我只想添加一些输入框并查看其显示方式。

Elastic Search源代码中的Layout函数如下：

function Layout({
  className,children,header,Box,bodyContent,bodyFooter,bodyHeader,sideContent
}) {
  return (
    <div className={appendClassName("sui-layout",className)}>
      <div className="sui-layout-header">
        <div className="sui-layout-header__inner">{header}</div>
      </div>
      <div className="sui-layout-header">
        <div className="sui-layout-header__Box">{Box}</div>
      </div>
      <div className="sui-layout-body">
        <div className="sui-layout-body__inner">
          <LayoutSidebar className="sui-layout-sidebar">
            {sideContent}
          </LayoutSidebar>
          <div className="sui-layout-main">
            <div className="sui-layout-main-header">
              <div className="sui-layout-main-header__inner">{bodyHeader}</div>
            </div>
            <div className="sui-layout-main-body">
              {children || bodyContent}
            </div>
            <div className="sui-layout-main-footer">{bodyFooter}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

Layout.propTypes = {
  className: PropTypes.string,children: PropTypes.node,header: PropTypes.node,Box: PropTypes.node,bodyContent: PropTypes.node,bodyFooter: PropTypes.node,bodyHeader: PropTypes.node,sideContent: PropTypes.node
};

请注意，我添加了额外的输入Box。

它的实现方式如下：

export default function App() {
  return (
    <SearchProvider config={config}>
      <WithSearch mapContextToProps={({ wasSearched }) => ({ wasSearched })}>
        {({ wasSearched }) => {
          return (
            <div className="App">
              <ErrorBoundary>
                <Layout
                  header={
                    <SearchBox/>
                  }
                  sideContent={
                    <div>
                      <Facet
                        field="sentiment"
                        label="sentiment"
                        isFilterable={true}
                      />
                      <Facet
                        field="category"
                        label="category"
                        isFilterable={true}
                      />
                    </div>
                  }
                  bodyContent={
                    <Results
                      titleField="sentence"
                    />
                  }
                  bodyHeader={
                    <React.Fragment>
                      {wasSearched && <PagingInfo />}
                      {wasSearched && <ResultsPerPage />}
                    </React.Fragment>
                  }
                  bodyFooter={<Paging />}
                />
              </ErrorBoundary>
            </div>
          );
        }}
      </WithSearch>
    </SearchProvider>
  );
}

所以我必须添加一行，写类似：

Box={<Some react Box code/>}

我希望我的问题很清楚。有人可以帮我，怎么做？

谢谢！