How to render a React component from a list of React components

I would like to display a component from a list of subcomponents:

I have a container that displays a menu on the left side of the screen and sections on the right. Menu items represent sections, and when the user clicks on an item in the menu, the selected section is displayed on the right side of the screen.

In an attempt to do it with React, I ended up with this code (very simplified from a real-world case, to make it shorter, but should be enough to send the intent to the reader):

class SectionContainer extends React.Component {
    constructor(props) {
        super(props)

        this.sections = [
            <SettingsSection
                user={ this.props.user }
            />
        ];

        this.state = {
            selectedSection: 0
        }
    }

    selectSection(index) {
        this.setState({ selectedSection: index });
    }

    render() {
        return (
            <div>
                { this.renderMenu() }
                { this.renderSection() }
            </div>
        );
    }

    renderMenu() {
        let items = [];

        for (var i = 0; i < this.sections.length; i++) {
            items.push(this.sections[i].getMenuEntry());
        }

        return (
            <SectionMenu
                items={ items }
                selectSection={ this.selectSection.bind(this) }
                selectedSection={ this.state.selectedSection }
            />
        );
    }

    renderSection() {
        return this.sections[this.state.selectedSection];
    }
}

class SectionMenu extends React.Component {
    render() {
        return (
            <div>
                { _.map(this.props.items, (item, index) => this.renderSectionItem(item, index)) }
            </div>
        );
    }

    renderSectionItem(item, index) {
        return (
            <SectionItem 
                { ...item }
                onClick={ this.selectSection(index) }
                selectedSection={ this.props.selectedSection == index }
            />
        );
    }

    selectSection(index) {
        this.props.selectSection(index);
    }
}

class SectionItem extends ReactComponent {
    render() {
        return <div>...</div>
    }
}

class Section extends React.Component {
    getMenuEntry() {
        return {
            title: this.getTitle(),
            body: this.getBody(),
        }
    }
}

class SettingsSection extends Section {
    getTitle() {
        return 'Title';
    }

    getBody() {
        return [
            'Line 1',
            'Line 2',
            'Line 3',
        ]
    }

    render() {
        return (
            <div>...</div>
        );
    }
}

      

        
        
        
      

    

However, it looks like I can't get the React component instances in the list and just call the methods or return them on render methods etc. It looks like they are not regular class instances.

How can this behavior be accomplished in React? (I'm coming from a Python background, so I may also have the wrong thinking when working with React that might get in the way.)