Semantic-UI-React icon-font issues when using React-Router and second level links

setup
Meteor 2.5.0 with React frontend
Semantic-UI-React (SUIR)
React-Router v6 (same issue with v5)

Issue
When loading the app on a second level link (i.e. http://localhost:3000/firstLevelPage/secondLevelPage), the icon-fonts are not loaded correctly.

The problem seems to be related to the relative paths to SUIR-icon-fonts:

@font-face {
  font-family: 'Icons';
  src: url("./themes/default/assets/fonts/icons.eot");
}

I placed the fonts into public/themes/default/assets/fonts/ which works fine on top level pages.

Fix attempt 1 It can be fixed by putting
<base href="http://localhost:3000/">
into the <head> of clients index.html. But obviously this wouldn’t work for deployment on various URLs.

Fix attempt 2 When creating a custom css-file and overwriting the paths with absolute paths, the fonts are displayed correctly. I.e.:

@font-face {
  font-family: "Icons";
  src: url("/themes/default/assets/fonts/icons.woff2") format("woff2");
}

But then there is still a lot of errors/warnings in the console.

Sandbox I’ve created a sandbox to reproduce this issue:
https://codesandbox.io/s/meteor-suir-reactrouter-issue-x8lm1

Here is a demonstration: https://gifyu.com/image/S2Rir

This is probably more related to SUIR and React-Router, but maybe someone around here has an idea about it. I do not get why this issue only appears in second level links. Thanks for your help!