Динамический роутинг в Gatsby, нужна помощь с настройкой

Я сделал простой сайт с Gatsby.js и не могу настроить динамические маршруты.

У меня есть страница index.js (была автоматически создана Gatsby), которая выглядит так:

import * as React from 'react'
const IndexPage = () => {

  return (
      <Layout
        pageTitle="Home Page"
      >
       Some text for my main page
      </Layout>
  )
}

export const Head = () => <title>Home Page</title>

export default IndexPage

Компонент Layout включает в себя Header:

import React, { useState, useEffect } from 'react';
import { Link } from 'gatsby';

const Header = () => { 

  return (
    <Wrapper style={{ *some styles* }}>
     <Link to="/">Index</Link>
     <Link to="/projects">Projects</Link >
   </Wrapper>
)
};

export default Header;

Есть страница (компонент) Projects:

import * as React from 'react'
import { BrowserRouter, Route, Routes } from 'react-router-dom'

import Layout from '../layout'

const Projects = () => {

return (

<BrowserRouter>
      <Layout>
           <Wrapper>
               <Routes>
                    <Route path="projects/:projectID/" component={ProjectDetails} />
                </Routes>
                 <Link to="/projects/1"> 
                     Project 1
                 </Link >
                    <Link to="/projects/2">
                     Project 2
                   </Link >
             </Wrapper>
        </Layout>
</BrowserRouter>
)}

export const Head = () => <title>Our Projects</title>

export default Projects

И есть компонент ProjectDetails:

import React from 'react';
import { useParams } from 'react-router';

import Layout from '../../pages/layout';

const ProjectDetails = () => {

    const { projectID } = useParams();

    return (
        <Layout>
            <Wrapper>
                <h2>Project {projectID}</h2>
            </Wrapper>
        </Layout>
    );
}

export default ProjectDetails;

Проблема в том, что когда я перехожу на localhost:8000/projects/1 (или "2", или "3", или "100500"), я вижу страницу 404 вместо моего компонента ProjectDetails.

Я попытался завернуть главную страницу в BrowserRouter и переместить туда Routes с моим динамическим Route, но, на мой взгляд, это глупая идея (и она не работает).

Я что-то упустил? Какие-то особенности Gatsby (v5), о которых я не знаю? Честно говоря, я думал, что динамические роуты здесь работают так же, как и в React Router. :)