Some images not loading on github pages after deploying. React - reactjs

Question

Hi I deployed a new react app to ghpages. One of the pages has a Tab Container with 3 Nav Items that serve as a link. The first tab which auto loads with the page shows all the images correctly. The second and third tab do not show the pages. These images are rendered properly when I run it locally. They are all coded the same way. Anyone know how to solve this?
Link to ghpages https://johntrieseverything.github.io/starcraft2-unit-counter/
The error occurs under the "Units List" section when selecting the second or third tab.
Here is what my code looks like:
<Tab.Container defaultActiveKey="Protoss" >
<Container fluid className='unitListDisplayBackground'>\
<Row style={{ height: '10vh' }}></Row>
<Row className='mt-5'>
<h1>Units List</h1>
<p>This is a page where you can view all playable units and see their stats</p>
</Row>
<Row>
<Nav fill variant='tabs' defaultActiveKey="/home">
<Nav.Item >
<Nav.Link
style={{ backgroundColor: '#393e46', color: '#ADD8E6', marginBottom: '1vh' }}
eventKey="Protoss">
<img
src={process.env.PUBLIC_URL + "/assets/Icons/Protoss Icon.png"}
alt='Protoss Icon'
style={{ width: '50px', height: '50px' }}
/></Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link
style={{ backgroundColor: '#393e46', color: '#ADD8E6', marginBottom: '1vh' }}
eventKey="Zerg">
<img
src={process.env.PUBLIC_URL + "/assets/Icons/Zerg Icon.png"}
alt='Zerg Icon'
style={{ width: '65px', height: '50px' }}
/>
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link
style={{ backgroundColor: '#393e46', color: '#ADD8E6', marginBottom: '1vh' }}
eventKey="Terran">
<img
src={process.env.PUBLIC_URL + "/assets/Icons/Terran Icon.png"}
alt='Terran Icon'
style={{ width: '50px', height: '50px' }}
/>
</Nav.Link>
</Nav.Item>
</Nav>
<Tab.Content>
<Tab.Pane eventKey="Protoss" style={{ textAlign: 'center' }}>
{/* Display the Protoss Units */}
<ProtossUnits />
</Tab.Pane>
<Tab.Pane eventKey="Zerg" style={{ textAlign: 'center' }}>
{/* Display the Zerg Units */}
<ZergUnits />
</Tab.Pane>
<Tab.Pane eventKey="Terran" style={{ textAlign: 'center' }}>
{/* First 3 Terran units */}
<TerranUnits />
</Tab.Pane>
</Tab.Content>
</Row>
</Container>
</Tab.Container>
Another issue I'm having is the 404 error on page refresh. I read that the Hashbrowser is a quick work around but the react router doc says its not recommended. What are some other potential solutions?
Code for routing:
class App extends Component {
render() {
return (
<div>
<BrowserRouter basename="starcraft2-unit-counter">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/UnitsList" element={<UnitsList />} />
<Route path="/UnitCountersPage" element={<UnitCountersPage />} />
<Route path="/ArmyCounterPage" element={<ArmyCounterPage />} />
</Routes>
</BrowserRouter>
</div>
)
}
}
Thank you!
Tried looking online for similar problems but couldn't find one..