I'm trying to pass values one by one to a functional component from array.map function. Unfortunately the component is not redering the value.

This is what I'm getting. There are room names stored in DB that should be printed here.

Homescreen.js

import React, { useState, useEffect } from "react";
import axios from "axios";
import Room from "../components/Room";

export default function Homescreen() {
  const [rooms, setRooms] = useState([]);
  const [loading, setLoading] = useState();
  const [error, setError] = useState();

  useEffect(async () => {
    try {
      setLoading(true);
      const data = (await axios.get("/api/rooms/getallrooms")).data;
      setRooms(data);
      setLoading(false);
      setError(false);
    } catch (error) {
      setLoading(false);
      setError(true);
      console.log(error);
    }
  }, []);

  return (
    <div>
      {loading ? (
        <h1>Loading...</h1>
      ) : error ? (
        <h1>Error fetching details from API</h1>
      ) : (
        rooms.map((room) => {
          return (<div>
              <Room key={room._id} room={room}></Room>
          </div>
        )
        })
      )}
    </div>
  );
}

Room.js (Funcitonal component that should print room names):

import React from "react";

function Room(room){
    console.log(room.name)
    return(
        <div>
            <h1>Room name: {room.name}.</h1>
        </div>
    )
}

export default Room;

The data is fetched correctly from db because if, instead of passing the value to component I print directly into my main screen, the values are printed.

In otherwords, in Homescreen.js, doing <p>{room.name}</p> instead of <Room key={room._id} room={room}></Room> print room names correctly.

So I reckon the problem is coming when I'm passing the values as props.

Any help is much appreciated. Thanks.