Не могу тэг заставить скачивать фаЙл

Проект на Next.js. Нужно, что бы при клике на ссылку файл начинал скачиваться.

Сначала пробовал:

<a
    href={'report' in item ?
        (item as ReportType).report //http://82.97.248.11:12121/media/about_us/reports/Jan_2024.jpg
        :
        (item as DocumentType).document //http://82.97.248.11:12121/media/about_us/document/Jan_2024.jpg
    }
    download={extractFileName('report' in item ? item.report : item.document)}
    type="button"
    className={style.buttonDownload}
></a>

В результате происходит переход по ссылке, а не скачивание файла. Затем попробовал:

<a
    href={'report' in item ? 
        `data:${(item as ReportType).report}` //data:http://82.97.248.11:12121/media/about_us/reports/Jan_2024.jpg
        :
        `data:${(item as DocumentType).document}` //data:http://82.97.248.11:12121/media/about_us/docunent/Jan_2024.jpg
    }
    download={extractFileName('report' in item ? item.report : item.document)}
    type="button"
    className={style.buttonDownload}
></a>

В результате запрос блокируется браузером(но это не точно) и выдаёт сообщение как на картинке.

Девтулс показывает наличие атрибута download

import style from './List.module.scss';
import Link from 'next/link';

type ReportType = {
    id: number;
    language: number;
    name: string;
    report: string;
};

type DocumentType = {
    id: number;
    language: number;
    name: string;
    document: string;
};

type CombinedType = ReportType | DocumentType;

export default function List({
    title,
    items,
}: {
    title: string;
    items: CombinedType[];
}) {
    function removeExtension(filename: string) {
    var parts = filename.split('.');
    return parts[0];
    }

    function extractFileName(url: string) {
    // Разделим строку URL по символу '/'
    let parts = url.split('/');
    // Получим последний элемент после разделения - это имя файла
    let fileName = parts[parts.length - 1];
    return fileName;
    }

    return (
    <div className={style.list}>
        <h2 className={style.title}>{title}</h2>
        <ul className={style.listBody}>
        {items.map((item, i) => {
            return (
            <li key={item.id} className={style.item}>
                <p className={style.titleItem}>{removeExtension(item.name)}</p>
                <a
                href={
                    'report' in item
                    ? // ? `data:${(item as ReportType).report}`
                        // : `data:${(item as DocumentType).document}`
                        (item as ReportType).report
                    : (item as DocumentType).document
                }
                download={extractFileName(
                    'report' in item ? item.report : item.document
                )}
                // type="button"
                className={style.buttonDownload}
                ></a>
            </li>
            );
        })}
        </ul>
    </div>
    );
}