PDF file download NOT working in React.js webapp using firebase (Excel works)

I am building a web app using React.js. I have some excel and pdf files in my firebase cloud storage, and I want to download them. In my Devize component, I render every file from storage and onClick the particular file that was clicked should automatically be downloaded. The logic for downloading the files is in my DownloadComponent. If I try to download an excel file it works perfectly, but when I try to download a pdf file it shows in my network tab that my request to the firebase server was made successfully code 200, but the browser doesn't start the automatic download. I can't seem to understand why this is happening. Below you can find my code:

 const Devize = () => {
  const dispatch = useDispatch();
  const history = useHistory();
  const [downloadUrl, setDownloadUrl] = useState('');
  const searchTerm = useSelector(selectSearchTermDevize);
  const devizeState = useSelector(selectDevizeState);
  const searchResults = useSelector(selectSearchDevizeState);
  const [startDownload, setStartDownload] = useState(false);

  useEffect(() => {
    async function fetchTheData() {
      try {
        // Get devize
        const res = await fetchDataFromStorage('devize');
        dispatch(setDevizeState({ devize: [...res] }));
        // Get echipamente
        const echipamente = await fetchEchipamente();
        if (echipamente) {
          dispatch(setEchipamente({ echipamente: [...echipamente] }));
        }
        // Get numere
        const nr = await getData();
        dispatch(setNumere({ numere: [...nr] }));
      } catch (err) {
        console.log(err);
      }
    }
    fetchTheData();
    // Avoid multiple files download!
    return () => {
      setDownloadUrl('');
    };
  }, []);

  useEffect(() => {
    if (downloadUrl !== '') {
      setStartDownload(true);
    }
  }, [downloadUrl]);

  const handleDownload = async (e) => {
    try {
      const url = await storage
        .ref(`devize/${e.target.dataset.name}`)
        .getDownloadURL();
      setDownloadUrl(url);
    } catch (err) {
      console.log(err.message);
    }
  };

  const downloadModel = async (e) => {
    try {
      await storage
        .ref('modele/DEVIZ.xlsx')
        .getDownloadURL()
        .then((url) => setDownloadUrl(url));
    } catch (err) {
      console.log(err.message);
    }
  };

  return (
    <div>
      <Header />
      <WrapperForUploadAndSearchDevize>
        <SearchDevize />
        <WrapperForUploadModelCreateDevize>
          <UploadDevize />
          <StyledModelDeviz onClick={downloadModel}>
            <TextDeviz>Descarca model deviz!</TextDeviz>
          </StyledModelDeviz>
          <StyledCreareDeviz onClick={() => history.push('/creare-deviz')}>
            <TextDeviz>Creare Deviz nou!</TextDeviz>
          </StyledCreareDeviz>
        </WrapperForUploadModelCreateDevize>
      </WrapperForUploadAndSearchDevize>

      <WrapperForResultsDevize>
        {searchTerm === ''
          ? devizeState.map((deviz, index) => (
              <DevizElement
                data-name={deviz.name}
                key={index}
                onClick={handleDownload}
              >
                {deviz.name}
                Created at: {deviz.createdAt.split('-')[0]}-
                {deviz.createdAt.split('-')[1]}
              </DevizElement>
            ))
          : searchResults.map((res, i) => (
              <DevizElement data-name={res.name} key={i} onClick={handleDownload}>
                {res.name}
                Created at:{res.createdAt.split('-')[0]}-
                {res.createdAt.split('-')[1]}
              </DevizElement>
            ))}

        {startDownload ? <DownloadComponent downloadSrc={downloadUrl} /> : null}
      </WrapperForResultsDevize>
    </div>
  );
};

export default Devize;


const DownloadComponent = ({ downloadSrc }) => {
  return (
    <WrapperIFrame>
      <iframe src={downloadSrc} />
    </WrapperIFrame>
  );
};

export default DownloadComponent;