Youtube video downloadet in next.js

Here is the api endpoint:

import ytdl from 'ytdl-core';import { NextApiRequest, NextApiResponse } from 'next';export default async (req: NextApiRequest, res: NextApiResponse) => {  const { url = '' }: { url?: string } = req.query;  const video = ytdl(url, { filter: 'audioonly' });  res.setHeader('Content-Disposition', 'attachment; filename="video.mp4"');  res.setHeader('Content-Type', 'audio/mp4');  video.pipe(res);}

here is the front end function

const handleDownload = async (url: string) => {  try {    const response = await axios.get(`/api/downloader?url=${url}`, {      responseType: 'blob'    });    const blob = new Blob([response.data], { type: 'audio/mp4' });    const downloadUrl = window.URL.createObjectURL(blob);    const link = document.createElement('a');    link.href = downloadUrl;    link.download = 'audio.mp4';    document.body.appendChild(link);    link.click();    document.body.removeChild(link);    window.URL.revokeObjectURL(downloadUrl);  } catch (error) {    console.error('Download failed:', error);    // Handle error (e.g., show error message to user)  }};

how can I handle the response in the front end? I am getting this error:

I think the issue is the API endpoint what did I get wrong?