Gatsby: 404 page thrown on browser navigation

Gatsby v3 is throwing a 404 page if I navigate to a route with browser buttons instead of clicking on a link. How can I fix this issue?

Steps to Reproduce

1. Start the Gatsby project with gatsby develop command.
2. Navigate from index page to about page by clicking on link.
3. Refresh the browser on about page.
4. Click on browser's back navigation.
5. For an unknown reason index page throws 404 page instead.

GIF

You may refer to the GIF attached below for better clarity.

Index Page: src/pages/index.js

import React from 'react';
import { Link } from 'gatsby';

const IndexPage = () => {
  return (
    <main>
      <h1>Index Page</h1>
      <Link to="/about">About Me</Link>
    </main>
  );
};

export default IndexPage;

About Page: src/pages/about.js

import React from 'react';
import { Link } from 'gatsby';

const AboutPage = () => {
  return (
    <main>
      <h1>About Page</h1>
      <Link to="/">Back To Home</Link>
    </main>
  );
};

export default AboutPage;

Package.json

{
  "name": "my-gatsby-site",
  "version": "1.0.0",
  "private": true,
  "description": "My Gatsby Site",
  "keywords": [
    "gatsby"
  ],
  "scripts": {
    "develop": "gatsby develop",
    "start": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "clean": "gatsby clean"
  },
  "dependencies": {
    "gatsby": "^3.6.2",
    "gatsby-plugin-gatsby-cloud": "^2.8.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}