Gatsby client side pages flicker and not rendering

Question

First timer here, hope you can help as I couldn't find a solution on Google.

I am trying to set up client side only pages on Gatsby. I have created the "App.js" component and set up the routes copying the code snippet from the Gatsby docs.

import React from "react"
import { Router } from "@reach/router"
import Layout from "../components/Layout"
import Profile from "../components/Profile"
import Details from "../components/Details"
const App = () => {
  return (
    <Layout>
      <Router basepath="/app">
        <Profile path="/profile" />
        <Details path="/details" />
      </Router>
    </Layout>
  )
}
export default App



// Details Component

import React from "react"
import { Link } from "@reach/router"
import Layout from "./layout"

function Details() {
  return (
    <Layout>
      <h1>Details</h1>
      <Link to="/app/profile">Details</Link>
    </Layout>
  )
}

export default Details


// Profile Component 

import React from "react"
import { Link } from "@reach/router"
import Layout from "./layout"

function Details() {
  return (
    <Layout>
      <h1>Profile</h1>
      <Link to="/app/details">Details</Link>
    </Layout>
  )
}

export default Details

gatsby-node.js

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions

  if (page.path.match(/^\/app/)) {
    page.matchPath = "/app/*"

    createPage(page)
  }
}

When I try to navigate to one of the client routes (e.g. app/profile), I can see the client page display for a split second before it goes blank. If I try refreshing it says that the page doesn't exist.

See video here : https://drive.google.com/file/d/1l6gphVa7X1r7L_bb0SWJuFIH4W1wtW-J/view?usp=sharing

Many thanks in advance

Paolo