Safari not rendering React components at all if I don't use a CSS Module file

Question

I am having the weirdest problem with Safari (desktop and iOS versions).

So I am building an app for a client where I made a header that has a "< Go Back" in the upper left corner. This "< Go Back" is bound to a boolean "isInternal" prop. So if I use the Header component, if I write:

<Header>{stuff}</Header>

The component does not load the Go Back button. But, if I write:

<Header isInternal>{stuff}</Header>

It loads the Go Back button. Okay, all good.

Originally, the Go Back button was styled using CSS modules. But, due to a styling animation gimmick the client wanted that relied on values in my index.css file, I had to ditch the CSS module and bind the styles to the main css file instead. This was NOT a big deal -- the component renders just fine on Chrome, Edge, Firefox, and Opera. But, ever since I ditched the CSS Module, the component does NOT render on Safari at all. I inspect the element on the page that has the "isInternal" prop on it, and the html markup is showing! and so are the styles! But it's just...not appearing. At all.

If I bring back the CSS module file and use that instead, it comes back!

It's not an import issue, because I removed the CSS Module import and rewrote the markup where necessary (like replacing className={styles.container} with className="container", etc.) and again, all other browsers on desktop and mobile work perfectly fine but Safari.

I'm dumbfounded. I cannot figure out why it won't show in Safari. Does anyone have any ideas? Thank you!

EDIT: to include my code, here's the code that works:

Here's my header code, that WORKS:

import React from 'react';
import styles from './Layout.module.css';
import { useEffect } from 'react';
import { Link } from 'react-router-dom';

const Layout = ({ isProject, title, children }) => {
    useEffect(() => {
        document.title = title
    });
    return (
        <>
            <header>
                <div className={styles.gobackcontainer}>
                    {isProject && <Link to="/"><span id={styles.goback}>Projects</span></Link>}
                </div>
                <a href="mailto:{*here's an email*}" className={styles.button}>Get in Touch</a>
            </header>
            <main className={styles.wrapper}>
                {children}
            </main>
        </>
    );
};

export default Layout;

And here's the code that does NOT work:

import React from 'react';
import { useEffect } from 'react';
import { Link } from 'react-router-dom';

const Layout = ({ isProject, title, children }) => {
    useEffect(() => {
        document.title = title
    });
    return (
        <>
            <header>
                <div className="gobackcontainer">
                    {isProject && <Link to="/"><span id="goback">Projects</span></Link>}
                </div>
                <a href="mailto:{*here's an email*}" className="button">Get in Touch</a>
            </header>
            <main className="wrapper">
                {children}
            </main>
        </>
    );
};

export default Layout;

Let me also clarify it is ONLY the "goback" part that isn't rendering in Safari. (even though the markup and styles are showing on inspect.) Everything else renders fine with either CSS modules or style sheets.

EDIT #2: Here's my CSS from the module file, which I put in my index.css file after removing the module:

.gobackcontainer {
  z-index: 1;
  pointer-events: none;
}

#goback {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  line-height: 1;
  pointer-events: all;
  width: auto;
  color: var(--dark);
  font-weight: normal;
  line-height: 1.5;
  text-decoration: none;
}

#goback:before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin-top: -3px;
  margin-right: 5px;
  transform: rotate(45deg);
  border-left: solid 2px var(--dark);
  border-bottom: solid 2px var(--dark);
  transition: 300ms ease-in-out;
}

* HEADER */

.wrapper {
  display: block;
  width: 100vw;
  height: auto;
  padding: calc(var(--spacing-xxxl) * 2) 0 var(--spacing-xxxl) 0;
  overflow-x: hidden;
}

header {
  position: fixed;
  top: 0;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-s);
  z-index: 10;
}

/* BUTTON */

.button {
  display: inline-block;
  padding: var(--spacing-xxs) var(--spacing-xxs) var(--spacing-xxxs)
    var(--spacing-xxs);
  text-align: center;
  background-color: var(--light);
  border: solid 2px var(--dark);
  box-shadow: 2px 2px 0px var(--dark);
  font-size: var(--p);
  line-height: var(--pl);
  color: var(--dark);
  text-decoration: none;
  transition: color 250ms ease-in-out, background-color 250ms ease-in-out,
    box-shadow 250ms ease-in-out;
}

.button:hover {
  color: var(--light);
  background-color: var(--dark);
  box-shadow: 0px 0px 0px var(--dark);
}

Again, the only thing not showing up in Safari when it's outside of the module is the "go back" stuff...for those wondering why I do not just keep the CSS Module file: there's certain text color animations that are tied to these classes that don't work if I have them in the module. (The animation works just fine, btw, even in Safari, so I'm not worried about that.)