How to cancel downloading file on clicking button in reactjs?

Question

I want to cancel downloading files on clicking cancel button.

What i am trying to do?

I download the files by sending a request to the server which shows a progress bar based on the file size downloaded. Now if a user clicks the cancel button it should stop downloading files. I am unsure how to cancel the request. I have a set a load_cancel state which sets to true on cancel button click on componentwillunmount method load_cancel state is set to false.

Below is the code,

this.state {
    load_cancel: false,};

componentDidMount() {
    if(this.props.item) {
        this.load_item_data();
    }
}

on_load_cancel = () => {this.setState({load_cancel: true;});

load_item_data = () => {
    const props = this.props;
    this.file_download_status = {};
    if (this.on_item_changed) {
        this.on_item_changed();
    }
    const item_changed = new Promise((resolve) => { this.on_item_changed = 
    resolve; });
    const abort_loading = Promise.race([item_changed, this.unmount]);

    item.load(props.item.id, gl, this.update_download_progress, 
    abort_loading).then((result) => {
        this.files = result.files;
        this.setState({
            item_download_done: true,
        });
        client.add_item_view(props.item.id, abort_loading);
    });

    {props.item &&
                <ProgressBar
                    on_load_cancel={this.load_cancel}
                />}

Below is the cancel button within Progressbar component,

<button onClick={props.on_load_cancel}>Cancel</button>

Could someone help me with this? Thanks.