Jest tests passed but get an Error: Error serializing `symbol` returned from `getStaticProps` when rendering component. Why?

Question

When trying to pass JSX.Element type arguments as props to my component, I get a serializing error when I run yarn dev

but my jest tests pass.

Why do the rendering tests pass when in fact the component doesn't render properly?

Here is the code:

//Index.tsx
export const getStaticProps: GetStaticProps = async (context) => {
  const greeting = <DateFC date={new Date()} />;
  const saved_locations: JSX.Element[] = [];
  return {
    props: {
      greeting: greeting,
      saved_locations: saved_locations,
    },
  };
};

and the error

Server Error
Error: Error serializing `.greeting.$$typeof` returned from `getStaticProps` in "/".
Reason: `symbol` cannot be serialized as JSON. Please only return JSON serializable data types.

This error happened while generating the page. Any console logs will be displayed in the terminal window.

Passing tests that render Index.tsx using the render function from react-testing-library

 test("should contain a header section with a role of banner", () => {
    const { container: dom_node } = render(<Index greeting={<DateFC />} />);

    expect(screen.getByRole("banner")).toStrictEqual(
      dom_node.querySelector("header")
    );
  });

And Index.tsx component definition

function Index(props: IndexFCProps) {
  return (
    <>
      <header>{props.greeting}</header>
      <main>
        <section aria-label="weather in saved locations">
          {props.saved_locations}
        </section>
        <section aria-label="weather in favorite location">
          <WeatherTile withTime={false}></WeatherTile>
        </section>
      </main>
      <nav>
        <Nav></Nav>
      </nav>
    </>
  );
}

I'm using the NextJs react framework.