How to download/save file of different extensions of different origin in ReactJS?

Question

I use ReactJS and need to download the file. The catch is I CAN'T use

     <a href={url} download={filename}></a>

Because the URL is coming from S3 bucket which is of different origin according to the documentation - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

I tried this but didn't work

        import React from 'react';
        import { withStyles } from '@material-ui/core/styles';
        import IconDownload from '@material-ui/icons/CloudDownloadTwoTone';

        const styles = theme => ({
          root: { 
          },
        });

        class AttachmentViewer extends React.PureComponent {
          static propTypes = {
            open: PropTypes.bool.isRequired,
            filename: PropTypes.string.isRequired,
            filePath: PropTypes.string.isRequired,
          };

          render() {
            const { filePath, filename } = this.props;
            return (
              <div>
                <a href={`${filePath}`} download={filename}>
                  <IconDownload />
                </a>
              </div>
            );
          }
        }

        export default withStyles(styles)(AttachmentViewer);

The above code is just opening the file once again.

I am getting the file path correctly as a prop. But it has a different origin.

Any idea how to download the file?