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

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:password@cluster0.gcyyo.mongodb.net/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;