Gatsby trailing slash redirect issue only on deployed version - redirect

Question

In my Gatsby app, I want the following routes:
/branches - shows stores' branch locations.
/branches/:id - shows information about a particular branch.
To accomplish this, I have the following folder structure:
src
pages
branches
index.tsx
Inside index.tsx, I have:
import React from 'react'
import { Router } from '#reach/router'
const Comp = (props: { path: any }) => {
return <pre>{JSON.stringify(props, null, 2)}</pre>
}
export default () => {
return (
<Router>
<Comp path="/branches" />
<Comp path="/branches/:id" />
</Router>
)
}
(The Comp component is there just to show the functionality is working.)
In my gatsby-node.js file, I have this:
// Implement the Gatsby API “onCreatePage”. This is
// called after every page is created.
exports.onCreatePage = async ({ page, actions }) => {
const { createPage } = actions
// page.matchPath is a special key that's used for matching pages
// only on the client.
if (page.path.match(/^\/branches/)) {
page.matchPath = '/branches/*'
// Update the page.
createPage(page)
}
}
So the result is that when I am running gatsby develop, everything works as expected. I can visit /branches and /branches/4 and I see what I expect, the Comp component displaying some routing information:
{
"path": "/branches",
"uri": "/branches",
"location": {
"pathname": "/branches/",
"search": "",
"hash": "",
"href": "http://localhost:1337/branches/",
"origin": "http://localhost:1337",
"protocol": "http:",
"host": "localhost:1337",
"hostname": "localhost",
"port": "1337",
"state": null,
"key": "initial"
}
}
However, when running deploying to S3 using gatsby build && gatsby-plugin-s3 deploy --yes, I get into a redirect loop:
What is the issue here and how can I resolve it?
(I have experimented with the gatsby-plugin-force-trailing-slashes and gatsby-plugin-remove-trailing-slashes plugins to no avail)