React site deployed on GitHub pages renders only partially

I've created a React webpage based on this template. I've tried to deploy this website on GitHub pages as described here, and it does render partially - see here, there are two main issues:

1. Only parts of the website render successfully. It seems the ElasticUI components are not properly rendering and
2. when I try to navigate to any of the other tabs on the website (e.g. "Speakers"), a 404 error is given.

Running this website on localhost works perfectly, so it seems to be an issue with the deployment on GH Pages. The code can be found here: https://github.com/kjemist/trikkefestivalen.

I've also tried to deploy this website on Vercel, but this renders even less than what I see on GH pages - which is a bit strange, considering that the demo for the template I use is hosted on Vercel.

There are 2 things that need to be changed to make things work as expected with github pages.

1. Github pages don't work with the history API. For a page like yours that has mutliple subpaths to work properly on github pages, you will need to use a Hash routing style. You will have to change BrowserRouter to HashRouter in your code.

   This change will also add a # into your URLs like https://kjemist.github.io/trikkefestivalen/#/events

   Without this change links to any of your subpaths will fail, i.e. https://kjemist.github.io/trikkefestivalen/events will return a 404 if you try to access it directly without navigating to it.

2. When the code is deployed to github pages the base url is a subdirectory https://kjemist.github.io/trikkefestivalen/ and not the main directory. This requires some changes to navigation that probably were non needed in your template code.

   There are multiple options here. An ugly one but which requires least amount of changes would be to prepend process.env.PUBLIC_URL + "#" whenever you push a path like history.push(process.env.PUBLIC_URL + "#/events").

   Better option, you can use useNavigate like

     let navigate = useNavigate();
   
     const tabs = [
       {
         id: "event",
         label: t("Event Details"),
         onClick: () => {
           navigate("/events");
         },
       }