Why would this code not work to populate html table from MongoDB in REACT?

Below is the code I am trying to implement. Basically just trying to map the table and placing the results in the body... but the code breaks after trying to map()

Would anybody know what could be missing? thanks..

import "./App.css";
import React from "react";

const mongoose = require("mongoose");

main().catch((err) => console.log(err));

async function main() {
  await mongoose.connect(
    "mongodb+srv://name:[e-mail]/test?retryWrites=true&w=majority"
  );
}

const PartSchema = new mongoose.Schema({
  reference: String,
  description: String,
  replacements: String,
});

const Part = mongoose.model("Part", PartSchema);


function App() {
  return (
    <div className="App">
      <h1>Hello World 5 </h1>
      <table>
        <thead>
          <tr>
            <th>Reference </th>
            <th> Description </th>
            <th>Replacements </th>
          </tr>
        </thead>
        <tbody>
          {Part.map((item) => (
            <tr>
              <td>{item.reference}</td>
              <td>{item.description}</td>
              <td>{item.replacements}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default App;