Браузер не просматривает ранее загруженное изображение

Question

У меня есть компонент в React, который отвечает за предварительный просмотр изображения. У меня также есть возможность удаления изображения. Я заметил, что если я загрузил изображение, а затем удалил его, я не могу предварительно просмотреть его, если хочу загрузить его снова. Почему это происходит? Это мой компонент:

class MediaPlaceholder extends Component {
  constructor(props) {
    super(props)
    this.state = {
      fileUrl: null
    }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(event) {
    this.setState({
      fileUrl: URL.createObjectURL(event.target.files[0])
    })
  }

  removeImage() {
    this.setState((prevState) => {
      URL.revokeObjectURL(prevState.fileUrl);
      return {fileUrl: null};
    });
  }

  render() {
    const {classes} = this.props;
    const {fileUrl} = this.state;
    return (
      <Paper className={classes.media}>
        {fileUrl &&
          <div className={classes.imageWrapper}>
            <IconButton aria-label="Clear" className={classes.iconButton} onClick={() => this.removeImage()}>
              <ClearIcon/>
            </IconButton>
            <img src={fileUrl} className={classes.image}/>
          </div>
        }
          <input
            accept="image/*"
            className={classes.input}
            id="upload-file"
            type="file"
            onChange={(event) => this.handleChange(event)}
          />
          <label htmlFor="upload-file">
            <Button component="span">
              Add media...
            </Button>
          </label>
      </Paper>
    );
  }
}