TelerikReportViewer in React Redirect When export

downloadReportAPI: (clientId: string, instanceId: string, documentId: string) =>
    axios.get<any>(
      `/reports/clients/${clientId}/instances/${instanceId}/documents/${documentId}?response-content-disposition=attachment`
    ),

import React, { useEffect, useState } from 'react';
import { useNavigate, useParams, useLocation, Navigate } from 'react-router-dom';
import { observer } from 'mobx-react-lite';
import { useStore } from 'src/stores/store';

export default observer(function DownloadReport() {
  const { clientId, instanceId, documentId } = useParams();
  const { pathname } = useLocation();
  const [loading, setLoading] = useState(false);
  const [text, setText] = useState('....');
  const navigate = useNavigate();
  const {
    ReportStore: { downloadReport, loadingList },
  } = useStore();

  const downloadFile = async (response: any) => {
    setLoading(true);
    setText('Downloading....');
    if (!response || !response.blob) {
      console.error('Invalid response:', response);
      return;
    }

    try {
      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = documentId!; // Set a more meaningful file name if needed
      document.body.appendChild(a);
      a.click();
      a.remove();
      setLoading(false);
    } catch (err) {
      console.error('Error while processing the response:', err);
    }
  };

  useEffect(() => {
    const res = downloadReport(clientId!, instanceId!, documentId!);
    downloadFile(res);
  }, [downloadReport]);

  //   useEffect(() => {
  //     downloadFile();
  //   }, [clientId, instanceId, documentId]);

  if (loading) return <h1>{text}</h1>;

  return null;
});

C:\Program Files (x86)\Progress\Telerik Reporting <YOUR VERSION>\Examples\CSharp\CSharp.ReportExamples.VS2022.sln

  <TelerikReportViewer
        ref={(el: any) => (viewer = el)}
        serviceUrl={url}
        authenticationToken={token}
        reportSource={{
          report: reportName,
          parameters: {
            Parameter1: JSON.stringify(data),
            Parameter2: reportParams,
          },
        }}
        viewerContainerStyle={{
          position: 'absolute',
          left: '5px',
          right: '5px',
          top: '50px',
          bottom: '5px',
          overflow: 'hidden',
          clear: 'both',
          fontFamily: 'ms sans serif',
        }}
        viewMode="INTERACTIVE"
        scaleMode="SPECIFIC"
        scale={1.0}
        enableAccessibility={false}
      />

using Telerik.Reporting.Services;
using Telerik.Reporting.Services.AspNetCore;

namespace API.Controllers
{

    [Route("api/reports")]
    [ApiController]
    public class ReportsController : ReportsControllerBase
    {
        public ReportsController(IReportServiceConfiguration reportServiceConfiguration)
       : base(reportServiceConfiguration)
        {
        }

    }
}