Mapbox popups in a React app not showing up after deploying to Heroku

I have a Mapbox installed in my React app which shows up popups, but only when working in localhost. When I deploy to Heroku the styles look broken. They look a bit faded so I guess it’s the styles which are broken, but I’m a bit lost wondering what I could change. We are also using bootstrap to style some components.

Popup in localhost /
Popup in Heroku

This is the styles file in apps.css

.mapboxgl-popup-content{
  background: none !important;
  padding: 0 !important;
}

.popup-border {
  background: linear-gradient(to right, rgb(255, 189, 65), rgb(255, 200, 255));
  padding: 4px;
  border-radius: 10%;
  opacity: 100%;
}

.popup-content {
  margin: auto;
  color: black;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 10%;
  background-color: white;
  min-width: 250px;
  opacity: 85%;
}

.popup-title {
  padding: 0px 20px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.popup-description {
  margin: 0;
  padding: 0px 20px;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
}

.popup-owner-attendees {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  text-align: center;
  padding: 0px 20px;
}

.popup-list-title {
  text-decoration: underline;
}
.orange-text {
  color: orange;
  border-bottom: 1px solid orange;
}

In case it helps, this is also the code for the popup inside the React component:

     {selectedEvent ? (
        <Popup
          latitude={selectedEvent.location[1]}
          longitude={selectedEvent.location[0]}
          onClose={() => {
            setSelectedEvent(null);
          }}
        >
          <div>
            <br />
            <h4>
              {selectedEvent.icon} {selectedEvent.title}
            </h4>
            <p>{selectedEvent.description}</p>
            <p>
              Host:
              {selectedEvent.owner
                ? "@" + selectedEvent.owner.username
                : "Anonymous"}
            </p>
            <p>
            {/* ATTENDEES IS NOT BEING POPULATED  */}
              Attendees:
              <ul>
                {selectedEvent.attendees.map((attendee) => {
                  return <li>{attendee.username}</li>;
                })}
              </ul>
            </p>
          </div>
        </Popup>
      ) : null}