How to render the menu from the routes defined at static.config.js file in an application build by react-static?

Question

Following the official guide, it should be something simple like this:

//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

My static.config.js file bellow was cut from the basic template. Only have a route to About page:

//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'),
  ],
}

But nothing is rendered.

if i set myRoutes variable inline it works. Example:

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

It seams the function useRouteData() is not called but i can't figure it out why.

The site is all made of static pages, available from any page in the site, so i think if i put all in the configuration file it will slit code, one page per template and also provide information to build the menu. I am not familiar with static-react build too, so may not be using the template as i am supposed too.