Force render issues (raw=1) and shared links won't work for hosting.

Hello! I've been using dropbox as a file hosting for my website for a couple months with no issues. My web is stored on Firebase, and it has React elements (I called them Songcards) that allow me to play or download those files on the go. Suddenly, it stopped working. I can't play them, but the download button still redirects me to the proper website, where I can play or download them. Only the <audio> tag and its src property aren't working as they should. I'll provide some screenshots along with a portion of the code that I tested on a different component just to simplify what I'd show to you and remove anything unnecessary.

The right numbers should provide information about song length and the play button should play the file. However, only the download button is working, and it redirects to the download web

You can try the download itself by using the link on the code block.

I'd love any kind of help, since it's something I've been using on a daily basis since a few months ago, and I'm paying for a high storage limit so I can store them all. Thank you!

import React from 'react'; import { useRef } from 'react'; export const Test = () => {    const audioRef = useRef();    const link = 'https://www.dropbox.com/scl/fi/bvmwih1pkzkf66bgdwnfg/Lugia-s-Song-Efecto.mp3?rlkey=lzdbe331pb58wvorcja32onx1&st=ypmco4i1&raw=1';    const handlePlay = () => {        audioRef.current.play();    };    return (        <div className='position-relative d-flex flex-column align-items-center mt-5'>            <button onClick={handlePlay}>                Play            </button>            <button onClick={() => { window.open(link, "_blank") }}>                Download            </button>            <audio                ref={audioRef}                src={link}                type="audio/mpeg"            />        </div>    ); } export default Test;