Cannot fix this issue that is failing tests. The test seems to only return a fail with the first prop (title)?

//PropertyCard.js
import React from  react ;

const PropertyCard = (
  {
    title, type, bathrooms, bedrooms, price, city, email,
  },
) => {
  <div className="property-card">
    <div className="property-card-title">{title}</div>
    <div className="property-card-type">{type}</div>
    <div className="property-card-city">{city}</div>
    <div className="property-card-bathrooms">
      {bathrooms}
    </div>
    <div className="property-card-bedrooms">
      {bedrooms}
    </div>
    <div className="property-card-price">
      {price}
    </div>
    <a href={`mailto:${email}`} className="property-card-email">
      Email
    </a>
  </div>;
};

//Properties.js
import React, { useEffect, useState } from  react ;
import  ../styles/properties.css ;
import PropertyCard from  ./PropertyCard ;
import axios from  axios ;
import Alert from  ./Alert ;

const Properties = () => {
  const initialState = {
    properties: [],
  };

  const [properties, setProperties] = useState(initialState.properties);
  const [alert, setAlert] = useState({ message:    });

  useEffect(() => {
    axios
      .get( http://localhost:3000/api/v1/PropertyListing )
      .then((res) => setProperties(res.data))
      .catch(() => setAlert({
        message:  An error occured whilst trying to retrieve properties. Please try again later. ,
      }));
  }, []);

  return (
    <div className="properties">
      <h1>View Properties Page</h1>
      <Alert message={alert.message} />
      {properties.map((property) => (
        <div key={property._id} className="item">
          <PropertyCard {...property} />
        </div>
      ))}
    </div>
  );
};

//PropertyCard.test.js
import React from  react ;
import { render, screen } from  @testing-library/react ;
import PropertyCard from  ../components/PropertyCard ;

describe( PropertyCard , () => {
  const validProps = {
    title:  2 bedroom flat ,
    type:  Flat ,
    bedrooms:  2 ,
    bathrooms:  1 ,
    price:  1000 ,
    city:  Manchester ,
    email:  testing@surreal-estate.com ,
  };
  it( renders the correct props for each property , () => {
    render(<PropertyCard fields={validProps} />);
    expect(screen.getByText( 2 bedroom flat )).toHaveClass( property-card-title );
    expect(screen.getByText( Flat )).toHaveClass( property-card-type );
    expect(screen.getByText( 2 )).toHaveClass( property-card-bedrooms );
    expect(screen.getByText( 1 )).toHaveClass( property-card-bathrooms );
    expect(screen.getByText( 1000 )).toHaveClass( property-card-price );
    expect(screen.getByText( Manchester )).toHaveClass( property-card-city );
    expect(screen.getByText( Email )).toHaveClass( property-card-email );
  });
});

I ve searched and read similar issues with this error - but cannot seem to find a fix for my issue. Does anyone have any ideas why it s failing?

Seems to be to do with the useEffect() hook in Properties.js - tests were passing before I added this in to the project.