I am trying to workout how to include a csv file link to a button within my react material table cell.

From the backend db, I have a column that holds a link to a csv file on a server, i.e.

filePath = 'https://my-file-server/files/outcome.csv'

that has been assigned to filePath within my react component.

I then want to basically emulate a <a href={filePath}>Download CSV</a> within my table cell, so tried using React-Router Link, i.e.:

import { Link } from 'react-router-dom';

<TableCell>
  <Link to={filePath}>
    <Button>
      Download CSV
    </Button>                  
  </Link>
</TableCell>

Now I am running my app from localhost:3000/my-route and when I click on my Download CSV button, it actually changes my url path to:

http://localhost:3000/my-route/my-file-server/files/outcome.csv

which is not what I want. I actually expected it to point directly to:

https://my-file-server/files/outcome.csv and then thought it would just download within my browser to my computer's download directory.

Unsure what I am doing wrong?