Child blocks not showing up in React?

Question

React

With this code and rendering of the App() method, as a result, only a div with the page class is displayed on the page, without any child elements :(( What went wrong?

import React from "react";
import ReactDOM from "react-dom";
import { FlowChartWithState } from "@mrblenny/react-flow-chart";
//import { INode, REACT_FLOW_CHART } from "@mrblenny/react-flow-chart";
import "./styles.css";

import chartSimple from './constants'
//import PropTypes from 'prop-types';

const Content = () => {
    return(
        <div className="Content"></div>
    )
}

const Message = () => {
    return(
        <div className="Message"></div>
    )
}

const Page = () => {
    return(
        <div className="Page"></div>
    )
}

const Sidebar = () => {
    return(
        <div className="Sidebar"></div>
    )
}

const Outer = () => {
    return(
        <div className="Outer"> Test2 </div>
    )
}

const SidebarItem = (props) => {
  return (
    <Outer
      draggable={true}
      onDragStart={ (event) => {
        console.log('123')
        // event.dataTransfer.setData(REACT_FLOW_CHART, JSON.stringify({props.type} , {props.ports}, {props.properties} ))
      } }
    >
      {props.type}
    </Outer>
  )
}

function App() {
  return (
    <Page>
    <Content>
      <FlowChartWithState initialValue={chartSimple} />
    </Content>
    <Sidebar>
      <Message>
        Drag and drop these items onto the canvas.
      </Message>
      <SidebarItem
        type="top/bottom"
        ports={ {
          port1: {
            id: 'port1',
            type: 'top',
            properties: {
              custom: 'property',
            },
          },
          port2: {
            id: 'port1',
            type: 'bottom',
            properties: {
              custom: 'property',
            },
          },
        } }
        properties={ {
          custom: 'property',
        }}
      />
      <SidebarItem
        type="bottom-only"
        ports={ {
          port1: {
            id: 'port1',
            type: 'bottom',
            properties: {
              custom: 'property',
            },
          },
        }}
      />
      <SidebarItem
        type="left-right"
        ports={ {
          port1: {
            id: 'port1',
            type: 'left',
            properties: {
              custom: 'property',
            },
          },
          port2: {
            id: 'port2',
            type: 'right',
            properties: {
              custom: 'property',
            },
          },
        }}
      />
      <SidebarItem
        type="all-sides"
        ports={ {
          port1: {
            id: 'port1',
            type: 'left',

          },
          port2: {
            id: 'port2',
            type: 'right',
          },
          port3: {
            id: 'port3',
            type: 'top',
          },
          port4: {
            id: 'port4',
            type: 'bottom',
          },
        }}
      />
      <SidebarItem
        type="lots-of-ports"
        ports={ {
          port1: {
            id: 'port1',
            type: 'left',

          },
          port2: {
            id: 'port2',
            type: 'right',
          },
          port3: {
            id: 'port3',
            type: 'top',
          },
          port4: {
            id: 'port4',
            type: 'bottom',
          },
          port5: {
            id: 'port5',
            type: 'left',
          },
          port6: {
            id: 'port6',
            type: 'right',
          },
          port7: {
            id: 'port7',
            type: 'top',
          },
          port8: {
            id: 'port8',
            type: 'bottom',
          },
          port9: {
            id: 'port9',
            type: 'left',
          },
          port10: {
            id: 'port10',
            type: 'right',
          },
          port11: {
            id: 'port11',
            type: 'top',
          },
          port12: {
            id: 'port12',
            type: 'bottom',
          },
        }}
      />
    </Sidebar>
  </Page>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

const Page = () => {
    return(
        <div className="Page"></div>
    )
}

this is the empty div

const Page = (props) => {
    return(
        <div className="Page">{props.children}</div>
    )
}

^ and like this, in a div, wrap everything that is written in the parent component inside the Page