It worked just fine when I only used the Light mode version, however since I've also added the dark mode version, no versions would show up. My dark and light mode logic switch comes from tailwind.config.js and the theme itself is in globals.css, I am not using next theme or anything like that.

I've also attached a screenshot from the console log, where it shows that the 2 Logos are both loaded, however neither won't show up for some reason. The light mode logo is supposed to show up when the app is in light mode and the dark mode version is supposed when the app is in dark mode.

Here is the relevant code:

const Logo = () => {
  const { RiveComponent: RiveComponentLight } = useRive({
    src: "/JobsBringerLogoLightAnimated.riv",
    autoplay: true,
    onLoadError: () => console.log("ERROR LOADING LIGHT LOGO"),
    onLoad: () => console.log("LOADED LIGHT LOGO"),
  });

  const { RiveComponent: RiveComponentDark } = useRive({
    src: "/JobsBringerLogoDarkAnimated.riv",
    autoplay: true,
    onLoadError: () => console.log("ERROR LOADING DARK LOGO"),
    onLoad: () => console.log("LOADED DARK LOGO"),
  });

  return (
    <div style={{ width: '300px', height: '300px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
      <div className="dark:hidden">
        <RiveComponentLight />
      </div>
      <div className="hidden dark:block">
        <RiveComponentDark />
      </div>
    </div>
  );
};

I can handle additional details if needed.