How to gracefully relocate the subcomponents within the React component?

based on react-semantic-ui, I assembled a Table component that can search and change pages.
is called < PaginatedTable / >

working example: https://codesandbox.io/s/23q6.

use as follows

<PaginationTable
    items={[
      {
        id: 1,
        name: "test-item-1 ???"
      },
      {
        id: 2,
        name: "test-item-2"
      },
      {
        id: 3,
        name: "test-item-3"
      }
    ]}
    columnOption={[
      {
        header: "idHeader",
        cellValue: "id",
        onItemClick: item => {
          alert(item.id);
        },
        sortingField: "id"
      },
      {
        header: "Name~",
        cellValue: item =>
          `*custom text cannot be searched* property can item.name => ${
            item.name
          } `,
        onItemClick: item => {
          alert(item.name);
        },
        sortingField: "name"
      }
    ]}
    initSortingField={"id"}
    initSortingOrderAsc={false}
    pagination
    itemsPerPage={2}
    searchKeyProperties={["id", "name"]}
  />

but at present, this component can only be in a fixed order as follows:

<PaginationTable>
 <SearchBar />
 <Table />
 <PaginationBar />
</PaginationTable>

but I didn"t actually split the three sub-components SearchBar , Table , PaginationBar within the component.
so I can"t use render props"s technique to reposition subcomponents.
if you change it to render props, you can adjust the position of the subcomponent like this:

<PaginationTable {... props}>
{({ SearchBar, Table, PaginationBar  })=>
<div>
 <SearchBar />
 <Table />
 <SearchBar />
</PaginationTable>
</div>
</PaginationTable>

I have a lot of trouble when I try to change it to render props, because when I split it into three sub-components, I have to modify all the related variables (this.state, this.props, this.xxxFunction) that were originally used in < PaginationTable > this . For example, if
uses this.setState ({searchBarText: e.target.value}) in < PaginationTable >, I have to change a lot of writing methods to pass on


<SearchBar onTextChange={()=>{

    this.setState({
        searchBarText: e.target.value
    });
}} />

is there any way to elegantly adjust the order of subcomponents without having to change the writing of render Props specifically for this matter?
or how to change it to render props more elegantly?

render(){ const SearchBar = ()= (<Input onChange={()=>{...} />); const TableElement = ()=>(<Table {...} > ... </Table>); const PaginationBar = ()=>(<Menu {...} > ... </Menu>); enter code here return( <React.Fragment> {this.props.children({ SearchBar,TableElement, PaginationBar })} </React.Fragment>)};