Unable to open other local html files which I link to from index.html running on localhost port 3000

Hi, the problem I have is that hyperlinks to local HTML pages don’t seem to work properly. I am currently building on top of the “Getting started” tutorial found here: https://www.algolia.com/doc/guides/building-search-ui/getting-started/js/
and I am running the application on localhost.
I am trying to make each item from the search results a link to a page “product.html”. If I make the link for each item a publicly accessible URL such as https://www.nike.com/fr/ it works fine. However, trying to access any HTML file (except index.html) in the root directory does not work. Here is the directory structure:
as you can see the product.html file is on the same level as index.html. Here is the code I use to try to link from index.html to product.html:

		  <div class="hit-price">
				<p id ="current_price">\{{price}}</p>
				<p id ="old_price">\{{old_price}}</p>
				<a href="product.html">click here</a> //THIS IS THE LINK THAT DOES NOT WORK

This is what happens when the link is clicked:

However, I am able to use the href “index.html” (which will just refresh the page when clicked) or any publicly accessible URLs as I stated above. I cannot understand why this is happening. All help is greatly appreciated.