On this real estate app I am working on, I had six different properties rendering on the right hand of the screen and now they are not rendering at all.

import { Property } from "../propertiesData";

interface PropertyListProps {
  properties: Property[];
}

export default function PropertyList({ properties }: PropertyListProps) {
  return (
    <div className="grid grid-cols-1 gap-4">
      {properties.map((property) => (
        <div
          key={property.id}
          className="bg-white shadow-md rounded-lg p-4 flex flex-col"
        >
          <img
            src={property.image}
            alt={property.address}
            className="w-full h-48 object-cover rounded-t-md"
          />
          <div className="p-4">
            <h2 className="text-xl font-bold">{property.salePrice}</h2>
            <p className="text-sm text-gray-600">
              {property.acreage} | {property.type}
            </p>
            <p className="text-sm text-gray-600">{property.address}</p>
            <div className="text-right">
              <span className="text-yellow-500 font-bold">
                {property.rating}
              </span>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

I import it into the App.tsx file as follows:

import type { Place } from "./api/Place";
import { useEffect, useState } from "react";
import Map from "./components/Map";
import LocationHeroSearch from "./components/LocationHeroSearch";
import PropertyList from "./components/PropertyList";
import { properties, Property } from "./propertiesData";
import "./App.css";

function App() {
  const [place, setPlace] = useState<Place | null>(null);
  const [selectedState, setSelectedState] = useState<string>("");
  const [filteredProperties, setFilteredProperties] = useState<Property[]>([]);

  useEffect(() => {
    const filtered = properties.filter(
      (property) => property.state.toLowerCase() === selectedState.toLowerCase()
    );
    setFilteredProperties(filtered);
    if (filtered.length > 0) {
      setPlace({
        id: filtered[0].id,
        name: selectedState,
        latitude: filtered[0].latitude,
        longitude: filtered[0].longitude,
        state: selectedState,
      });
    }
  }, [selectedState]);

  return (
    <div className="h-screen w-screen flex flex-col">
      <div className="w-full p-4">
        <div className="bg-white shadow-md rounded-lg p-4 bg-hero">
          <LocationHeroSearch onSearch={(state) => setSelectedState(state)} />
        </div>
      </div>
      <div className="flex flex-grow">
        <div className="w-full lg:w-1/2 p-4 flex flex-col">
          <div className="bg-white shadow-md rounded-lg p-4 flex-grow flex">
            <Map properties={filteredProperties} />
          </div>
        </div>
        <div className="w-full lg:w-1/2 p-4">
          <div className="bg-white shadow-md rounded-lg p-4 h-full">
            <PropertyList properties={filteredProperties} />
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;