React Testing Library Error: Uncaught [TypeError: Cannot read property 'map' of undefined]

I am working on an app which generates a list of services using NextJS and the react testing library. Currently, I have test failing for rendering a service list component. This test fails due to the services not existing, even though they are being passed into the component.

My services.js has the follow code:

import {
  Header,
  Container,
  Breadcrumb,
  Row,
  Col,
} from "components-library";
import { Main } from "../src/components/main";
import { Card } from "../src/components/card";

export default function Home (props) {
  const {services} = props
  return (
    <>
      <Header>
        <Header.Container>
          <Header.Logo href="/" />
        </Header.Container>
      </Header>
      <Breadcrumb data-testid="breadcrumb">
        <Breadcrumb.Item href="/">Previous page</Breadcrumb.Item>
      </Breadcrumb>
      <Container>
        <Main>
          <Row>
            <Col width="three-quarters">
              {services.map(service => (
                  <Card
                  title={service.title}
                  description={service.description}
                  url={service.url}
                />
              ))}
            </Col>
          </Row>
        </Main>
      </Container>
    </>
  );
}

With my services.test.js as follows:

import { render, screen } from "@testing-library/react";
import Page from "../../../pages/services";
describe("services api returns", () => {
  it("shows cards from getServices", async () => {
    render(<Page services={[
      {
        title: "Example Title",
        description: "This is an example description",
        url: "https://www.google.com",
      },
    ]} />);
    expect(screen.getByText("Example Title")).toBeInTheDocument();
  })
});

I get the error that

Error: Uncaught [TypeError: Cannot read property 'map' of undefined]