How to enable ssg/ssr in next.js with custom App component

Question

I have a custom _app.js which looks like this:

function MyApp({ Component, pageProps }) {
  const Layout = Component.layoutProps?.Layout || React.Fragment
  const layoutProps = Component.layoutProps?.Layout
    ? { layoutProps: Component.layoutProps }
    : {}
  const meta = Component.layoutProps?.meta || {}
  const description =
    meta.metaDescription || meta.description || 'Meta Description'
  const store = useStore(pageProps.initialReduxState)

  return (
    <QueryClientProvider client={queryClient}>
      <Provider session={pageProps.session}>
        <Title suffix="My Dynamic Site">{meta.metaTitle || meta.title}</Title>
        <Description>{description}</Description>
        <Meta />
        <ReduxProvider store={store}>
          <PersistGate persistor={store.__PERSISTOR} loading={null}>
            <CartBox />
            <Layout {...layoutProps}>
              <Component {...pageProps} />
            </Layout>
          </PersistGate>
        </ReduxProvider>
        <ReactQueryDevtools initialIsOpen={false} />
      </Provider>
    </QueryClientProvider>
  )
}

MyApp.getInitialProps = async (appContext) => {
  // calls page's `getInitialProps` and fills `appProps.pageProps`
  const appProps = await App.getInitialProps(appContext);

  return { ...appProps }
}

export default MyApp

Now, I would like to fetch data using ssg/ssr data fetching method to help SEO team for my page components. But, it seems any of the methods aren't working as expected, none of them actually passing props to the page component. Here's my page component.

const HomePage = ({ title, stars }) => {
  console.log(title, stars);  // undefined, undefined
  return (
    <div>
      <Header title={title} />
      <GhStars stars={stars} />
      <Footer />
    </div>
  )
}

export const getStaticProps = async () => {
  return {
    props: {
      title: "My Dynamic Title From getStaticProps"
    }
  }
}

// I tried both getInitialProps & getStaticProps independently.
HomePage.getInitialProps = async (ctx) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}

export default HomePage

I might be missing something for sure, which I failed to figure out so far. Any help will be really much appreciated. Thanks.