It should be just as simple as placing the pagination component above the list in HTML output of ReactDOM.render(). For example, this is the implementation of pagination using react and bootstrap (different to react-bootstrap), this is placed above the table that it paginates.

{pages.length > 0 && <nav className="d-lg-flex justify-content-lg-end dataTables_paginate paging_simple_numbers">
            <ul className="pagination">
                <li className={"page-item " + (page === 0?"disabled":"")} onClick={(s)=>{
                    s.preventDefault();
                    setPage(Math.max(page-1,0));
                }}><a className="page-link" href="#" aria-label="Previous"><span
                    aria-hidden="true">«</span></a></li>
                {pages.map((el)=><li key={"page" + el.page} onClick={(e)=>{
                    setPage(el.page);
                }} className={"page-item "+(page===el.page?"active":"")}>
                <a className="page-link" href="#">
                    {el.name}
                </a></li>)}
                <li className={"page-item " + (page === pages.length-1?"disabled":"")} onClick={(e)=>{
                    setPage(Math.min(page+1,pages.length-1));
                }}><a className="page-link" href="#" aria-label="Next">
                <span
                    aria-hidden="true">»</span></a></li>
            </ul>
            </nav>}

(pages.length is defined previously in the react script)