react storefront TypeError: Cannot read property '_includeAppData' of undefined

I have been using react storefront for a couple of weeks now. Though I understood high level concepts, I am really stuck for API implementation using fulfillAPIRequest, fetchFromAPI, appData and pageData etc.

My current code is as follows:

File: _app.js:

export default function MyApp({ Component, pageProps }) {
  useJssStyles()
  const classes = useStyles()
  const [appData] = useAppStore(pageProps || {})

  return (
    <PWA errorReporter={reportError}>
      <Head>
        {/* <meta
          key="viewport"
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
        /> */}
      </Head>
      <SessionProvider url="/api/session">
        <MuiThemeProvider theme={theme}>
          <CssBaseline/>
          <Header className={classes.header} />
          <HeaderBanner />
          <Delivery />
          <Search />
           <main className={classes.main}>
            <Component {...pageProps} />
          </main>
          <Footer />
        </MuiThemeProvider>
      </SessionProvider>
    </PWA>
  )
}

MyApp.getInitialProps = async function({ Component, ctx }) {
  let pageProps = {}

  if (Component.getInitialProps) {
    console.info("Executing _app.js: Invoking Component.getInitialProps...")
    pageProps = await Component.getInitialProps(ctx)
  }

  return { pageProps }
}

file: pages/index.js => entry point page

import React from 'react'
import { fetchFromAPI, createLazyProps } from 'react-storefront/props'
import NearbyShops from '../components/shops/nearby-shops.js'


export default function Index(lazyProps) {

  return  (
    <NearbyShops />
  )
}

Index.getInitialProps = createLazyProps(fetchFromAPI, { timeout: 50 })

I implemented api for the page index.js, in the foder /pages/api/index.js, as follows...

import fulfillApiRequest from 'react-storefront/props/fulfillAPIRequest'

function getPageData () {
  console.info("Executing 'getPageData' in /api/index.js...")
  return Promise.resolve({})
}

export default async function Index (params, req, res) {

  console.info("Executing '/pages/api/index.js' ...")
  const result = await fulfillApiRequest(req, {
    appData: () => getAppData(),
    pageData: () => getPageData()
  })
  return result
}

When I run this app, I get the following error in the GUI:

In the console, I get the error stack trace as follows...

If I don't use the fulfillAPIRequest and its related api methods, I am able to show the rendered page, normally. But now I want to integrate the API. The official documentation is not that helpful in this regard.

Please help.