Getserversideprops providing component with undefined rather than data

Question

I have a Navbar component that I am trying to pull into every "page". I'd like to get the data for it from WPGraphql. I think I can sort that out myself once I have figured out why I'm currently getting:

{ data: undefined }

rather than:

{ data: 'Hello' }

from the console log in the navbar component.

_app.js

import type { AppProps as NextAppProps } from 'next/app';
import Navbar from '../components/Navbar';

type MyAppProps = NextAppProps & {
  navigationData: any;
};

function MyApp({ Component, pageProps, navigationData }: MyAppProps) {
  return (
    <div>
      <Navbar data={navigationData} />
      <Component {...pageProps} />
    </div>
  );
}

export async function getServerSideProps() {
  // Fetch navigation data from an API or a database
  return {
    props: {
      navigationData: { data: 'Hello' },
    },
  };
}

export default MyApp;

Navbar.js

import React from 'react'

export default function Navbar({data}) {
    console.log(data)
    return (
        <div>Navbar</div>
    )
}