Рендеринг компонента на основе состояния в реагировать родной

Question

Я использую реагирующее родное меню для меню в приложении. Поскольку этот модуль использует состояние для управления нажатием на меню, я хотел бы использовать его также для визуализации компонента.

Я ссылаюсь на это решение, но оно не работает, я получил

Ожидаемый класс компонента, получил [объект Object].

Вот что я сделал:

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
} from 'react-native';
import Menu from './menu';

import SideMenu from 'react-native-side-menu';
import First from './first';
import Second from './second';

module.exports = class Main extends Component {
    state = {
    isOpen: false,
    selectedItem: 'First',
  };

  toggle() {
    this.setState({
      isOpen: !this.state.isOpen,
    });
  }

  updateMenuState(isOpen) {
    this.setState({ isOpen, });
  }

  onMenuItemSelected = (item) => {
    this.setState({
      isOpen: false,
      selectedItem: item,
    });
  }

  render() {
    const menu = <Menu onItemSelected={this.onMenuItemSelected} />;

    return (
      <SideMenu
        menu={menu}
        isOpen={this.state.isOpen}
        onChange={(isOpen) => this.updateMenuState(isOpen)}
        >
        <this.state.selectedItem />
        <Button style={styles.button} onPress={() => this.toggle()}>
          <Image
            source={require('./assets/menu.png')} style={{width: 32, height: 32}} />
        </Button>
      </SideMenu>
    );
  }
}
....

ОБНОВИТЬ

Спасибо за предложение @NaderDabit. Да, действительно, я должен использовать

selectedItem: <First />,

вместо.