React Components inside fragment not loading

Question

I'm using react 16.2.0 and react-dom 16.2.0. Following is the code I have.

import React, { Fragment } from 'react';

import BodyComponent from './BodyComponent';
import * as HeaderComponents from './HeaderComponent';


class TablePage extends React.Component {
    constructor(props) {
        super(props);
    }


    render() {

        const MyHeader = (props) => {
            const Header = HeaderComponents.TableHeader;
            return <Header status={props.status}/>;
        };



        let pageContent = null;



            pageContent = (
                <ul className="list-table" role="table" aria-label={MessageConstants.ASSIGNMENT_ITEMS_TABLE_CAPTION_MESSAGE}>
                    <MyHeader status={status}/>
                    {
                        items.map((item, i) => {
                            return <TableBody dataSet={item} key={i}/>;
                        })
                    }
                </ul>
            );


        return (pageContent);
    }
}

class TableBody extends React.Component {
    constructor(props) {
        super(props);

    }


    render() {
        const {dataSet} = this.props;


        const BodyHeader = (props) => {
            const Header = HeaderComponents.BodyHeader;
            return <Header index={this.props.index}/>;
        };


        return (
        <Fragment>
         <BodyHeader index={this.props.index}/>
         <BodyComponent itemList={dataSet.content}/>
        </Fragment>
        );
    }
}

export default TablePage;

My problem is, the components I'm returning inside are not rendering. I don't get any errors in the console as well.

I tried rendering simple html code such as

<Fragment>
    <p>foo</p>
    <p>bar</p>
</Fragment>

But the issue remains. Can someone please help me with this.