Ant Design: how to populate content section with components for relevant menu item

I'm trying to use AntD menu sider like a tab panel.

I want to put components inside the content so that the content panel renders the related component when a menu item is clicked.

How do I get this structure to take components as the content for each menu item?

import React from 'react';
import { compose } from 'recompose';
import { Divider, Layout, Card, Tabs, Typography, Menu, Breadcrumb, Icon } from 'antd';
import { PasswordForgetForm } from '../Auth/Password/Forgot';


const { Title } = Typography
const { TabPane } = Tabs;
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;


class Dashboard extends React.Component {
  state = {
    collapsed: false,
  };

  onCollapse = collapsed => {
    console.log(collapsed);
    this.setState({ collapsed });
  };

  render() {
    return (
      <Layout style=>
        <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
          <div  />
          <Menu theme="light" defaultSelectedKeys={['1']} mode="inline" >

            <Menu.Item key="1">
              <Icon type="fire" />
              <span>Next item</span>
              <PasswordForgetForm />
            </Menu.Item>  
            <Menu.Item key="2">
              <Icon type="fire" />
              <span>Next item</span>
              <Another component to render in the content div />
            </Menu.Item>

          </Menu>
        </Sider>
        <Layout>
          <Header style= />
          <Content style=>

            <div style=>
            RENDER RELEVANT COMPONENT HERE BASED ON MENU ITEM SELECTED
            </div>
          </Content>
          </Layout>
      </Layout>
    );
  }
}

export default Dashboard;

When I try to render this, no errors are thrown, but the content div does not update with the PasswordForgetForm that I specified as the content for the menu item.

I tried Chris' suggestion below - which works fine to render the component for each of the different menu item content divs in the layout segment, however - the downside of this approach is that with every page refresh, the path goes to the content component for that particular menu item, instead of the test page which has the menu on it -- and the content component with that relevant content. If this approach is endorsed as sensible, is there a way to keep the page refresh on the original page, rather than trying to go to a subset menu item url?

from Ant Design: how to populate content section with components for relevant menu item