Ошибка при пробросе данных с помощью props (ReactJS)

Структура проекта:

/App.js

/components/Post.js

Из Post.js массив с данными, пытаюсь перенести на уровень выше, в /App.js и пробросить с помощью props. Но возникает ошибка.

App.js

import Header from './components/header/Header';
import Nav from './components/nav/Nav';
import Footer from './components/footer/Footer';
import Post from './components/Post';
import Posts from './components/Posts';
import {BrowserRouter, Route} from "react-router-dom";

import {NavLink} from "react-router-dom";

function App() {
  let linksRoute = [
    {link: "/"},
    {link: "/profile"},
    {link: "/dialogs"}
  ]
  let PoostData = [
    {id: 1, text: "Hi!"},
    {id: 2, text: "Hello World."}
  ]
// массив с данными из /Post.js
  return (
    <BrowserRouter>
      <div className="app-wrapper">
      <Header />
      <div className="wrapper">
        <main>
          <aside>
            <Nav />
          </aside>
          <div className="section">
            <Route path={linksRoute[1].link} render={ () => <Post text={PoostData} />} />
          </div>
          <Post text={PoostData} />
        </main>
      </div>
      <footer>
        <Footer />
      </footer>
    </div>
    </BrowserRouter>
  );
}

export default App;

/Post.js

const Poost = (props) => {
  return (
    <p>{props.text}</p>
  );
}
const Post = (props) => {
  
  
let PoostElements = props.PoostData.map ((poo) => <Poost text={poo.text} />);
debugger
  return (
      <section>
        <article>
          {PoostElements}
      </article>
      </section>
  );
}

export default Post;

При этом возникает ошибка: