How do I code a working download link in my React app?

Question

I'm working with GridFS on the server and have an api endpoint (which is correctly functioning in postman,) to download files.

When I try from my react component a download begins (with an obscure name) and quickly fails. The error is 'download failed - no file'.

The download link is correct; in postman, the downloaded image is displayed.

Many thanks

Here is my component code:

import React, { useEffect } from "react";
import { getMyFilenames, downloadFile } from "../features/assets/AssetsSlice";
import { useDispatch } from "react-redux";
import { useSelector } from "react-redux";

const AssetsList = () => {
  const dispatch = useDispatch();
  const { filenames, rawFilenames } = useSelector((state) => state.assets);

  useEffect(() => {
    dispatch(getMyFilenames());
  }, [dispatch]);

  return (
    <>
      {filenames
        ? filenames.map((filename, i) => (
            <p key={i}>
              <a
                href={`api/assets/${rawFilenames[i]}`}
                target="_blank"
                download
              >
                {filename}
              </a>
            </p>
          ))
        : null}
    </>
  );
};

export default AssetsList;