Heroku url routes can only be reached programmatically

Sorry if this question is vague but I really don't know what code to present.

I have a Heroku webpage which is running fine. I am using reach-router to navigate from one page to another on button clicks: <button onClick={() => navigate('/intro')}>Click</button>. When I do this the url changes appropriately and my content is visible. However if I type in the exact same url I get an error saying Cannot GET /intro. This error even happens if I use the button click to navigate and then reload the page.

It's my understanding that app.use(express.static('build')); will serve my static files.

So why can I visit pages if I start at my root url and navigate from there but I can't enter a url and travel to that page?

The website is live here https://build-a-wedding.herokuapp.com/

Adding more details on my server.js

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const cors = require('cors');
const sessionMiddleware = require('./modules/session-middleware');
require('dotenv').config();

const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use(sessionMiddleware);

app.use(cors());

// Serve static files
app.use(express.static('build'));
app.use(express.static(path.resolve(__dirname, '..', 'build')));

const users = require('./routes/users.router');
const dataFetch = require('./routes/data.router');
const venues = require('./routes/venues.router');

app.use('/users', users);
app.use('/location', dataFetch);
// app.use('/', auth);
app.use('/venues', venues);

const PORT = process.env.PORT || 3001;

app.listen(PORT, () => {
  console.log(`Listening on port: ${PORT}`);
});

When I navigate programmatically here is what i see for my sources

When I type in the same URL here is the source tree

from Heroku url routes can only be reached programmatically