Как запустить оповещение при нажатии кнопки React.js

Я прошел через руководство по загрузке файла реакции и хочу добавить к нему. Я пытаюсь сделать так, чтобы когда пользователь нажимал на сообщение загрузки, браузер предлагал им сказать: «Ваш файл загружается». Я ни в коем случае не являюсь разработчиком внешнего интерфейса, поэтому, пожалуйста, простите меня, если этот вопрос супер-нуби. По какой-то причине, когда я использую этот код, если вы переходите на веб-страницу, код функции запускается один раз, а затем снова при нажатии. Мое предполагаемое использование - запускать только по щелчку, есть идеи, что я делаю не так?

import React, { Component } from 'react'
import { Alert } from 'react-alert'

class Main extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      imageURL: '',
    };

    this.handleUploadImage = this.handleUploadImage.bind(this);
  }

  handleUploadImage(ev) {
    ev.preventDefault();

    const data = new FormData();
    data.append('file', this.uploadInput.files[0]);
    data.append('filename', this.fileName.value);

    fetch('http://localhost:8000/upload', {
      method: 'POST',
      body: data,
    }).then((response) => {
      response.json().then((body) => {
        this.setState({ imageURL: `http://localhost:8000/${body.file}` });
      });
    });
  }

  render() {
    return (
      <form onSubmit = {this.handleUploadImage}>
        <div>
          <input ref = {(ref) => { this.uploadInput = ref; }} type = "file" />
        </div>
        <div>
          <input ref = {(ref) => { this.fileName = ref; }} type = "text" placeholder = "Enter the desired name of file" />
        </div>
        <br />
        <div>
          <button onclick = "myFunction()">Upload</button>
              <script>
              function myFunction() {
                  alert("Your file is being uploaded!")
              }
              </script>

        </div>
        <img src = {this.state.imageURL} alt = "img" />
      </form>
    );
  }
}

export default Main;