Trying to render a MUI Grid dynamically in React

Question

I first make a request to a MongoDB server to get data from a database, all asynchronously and return a promise in App.js.

Then I pass that as a prop in my Card.js component and use .then() to get the data and push it into a new array. (I'm not sure if this is the best way to do this)

Right now I'm trying to display the names in the data dynamically using an MUI Grid, I am having problems as it shows that the data is in my array but I get no Cards on the UI. What am I doing wrong?

Card.js

import * as React from 'react';
import Grid from '@mui/material/Grid';
import RoomCard from './RoomCard'
import { useState } from 'react';

export default function Card({rooms}){
    const [loading, setLoading] = useState(false);
    let roomData = [];
    rooms.then(roomNames => { 
      roomNames.map(room => roomData.push(room)); 
    })
    console.log(roomData);
    
    return(<Grid container spacing={2}>
            {roomData.map(room => 
                <Grid item key={room} xs ={4}>
                  <RoomCard name = {room.name} />
                </Grid>
            )}
          </Grid>
    );

}

App.js

import './App.css';
import Navbar from './components/NavBar';
import AddRoom from './components/AddRoom'
import RoomCard from './components/RoomCard'
import Grid from '@mui/material/Grid';
import Cards from './components/Cards'

function App() {
  let rooms = getRecords();
  return (
    <div className="App">
        <Navbar/>
        <AddRoom/>
        <Cards rooms = {rooms} />
    </div>
  );
}


async function getRecords() {
  const response = await fetch(`http://localhost:5000/room/`);

  if (!response.ok) {
    const message = `An error occured: ${response.statusText}`;
    window.alert(message);
    return;
  }

  const rooms = await response.json();
  
  return rooms;
}

export default App;