Как отобразить меню из маршрутов, определенных в файле static.config.js в сборке приложения с помощью response-static?

Question

Следуя официальному руководству, это должно быть примерно так:

//App.js
import React from 'react'
import { useRouteData } from 'react-static'

const { myRoutes} = useRouteData()

function App() {
  console.log(myRoutes.length)
  return (
    <div>
      <h1>My page list</h1>
      <ul>
        {myRoutes.map(item => (
          <li key={item.path}>{item.template}</li>
        ))}
      </ul>
    </div>
  )
}

export default  App

Мой файл static.config.js, приведенный ниже, был вырезан из базового шаблона. Есть только путь к странице О себе:

//static.config.js
import path from 'path'

export default {
  getRoutes: async () => {
    return [
    // A simple route
    {
      path: 'about',
      template: 'src/pages/about',
    },
  ]
  },
  plugins: [
    [
      require.resolve('react-static-plugin-source-filesystem'),
      {
        location: path.resolve('./src/pages'),
      },
    ],
    require.resolve('react-static-plugin-reach-router'),
    require.resolve('react-static-plugin-sitemap'),
  ],
}

Но ничего не отображается.

если я установил встроенную переменную myRoutes, она работает. Пример:

   const myRoutes = [{"path":"p1","template":"t1"}]

Это сшивает функцию useRouteData() не называется, но я не могу понять почему.

Сайт состоит из статических страниц, доступных с любой страницы сайта, поэтому я думаю, что если я помещу все в файл конфигурации, он разделит код, по одной странице на шаблон, а также предоставит информацию для создания меню. Я также не знаком со сборкой статической реакции, поэтому, возможно, тоже не использую шаблон, как я предполагал.