How to index div blocks so that I can access different properties from different divs?

I'm working on a personal project, and one of the features that I'm doing is a pdf-uploader where you can upload pdfs & view them.

THE ISSUE:
The div blocks pop up fine, but it ONLY shows the most recently uploaded PDF. For example, if I uploaded my resume and then uploaded an assignment, when I go to click the view button on the resume's div block, it would display my assignment and NOT the resume. This is really holding me back from progressing.

In the end, I want to be able to view the files associated with the individual div blocks which I believe could be achieved using indexing. I'm pretty new to ReactJS, though, so I'm kinda going through the learning curves. I attached my code so that you can see how it works (super simple to use.)

CURRENTLY:
In the screenshot below, you'll see that I uploaded a PDF called "Job Shadow", and then I uploaded a PDF called "Workshop agenda". When I click on the view button for the Job Shadow div, it displays the workshop agenda pdf:

CODE:

import { FilePicker } from 'react-file-picker';
import Button from 'react-bootstrap/Button';
import Modal from 'react-awesome-modal';

import '../styles/transcripts.css';

class Transcripts extends Component {
  constructor() {
    super();
    this.state = {
      title: "",
      visible: false,
      uploadedFiles: [],
      fileDisplay: ""
    };
  }

  // Simply opens the modal
  openModal() {
    this.setState({
      visible: true
    });
  }

  // Closes the modal
  closeModal() {
    this.setState({
      visible: false
    });
  }

  /*
   * This method handles the action of 'uploading' a file.
   * First it checks if you've already uploaded the file, and if so, it won't allow you to upload it again.
   * In the event that it's not uploaded, it gets added into our list of transcripts.
   */
  handleFileChange = file => {
    if (this.handleCheck(file.name) === true) {
      alert("Duplicate file. You've already uploaded this.");
    } else {

      this.setState({ fileDisplay: URL.createObjectURL(file) }) //creates the URL for the PDF to render

      this.setState({ title: file.name });
      var joined = this.state.uploadedFiles;
      joined.push(file.name);
      this.setState({ uploadedFiles: joined });
    }
  };

  // Simply checks whether or not you've uploaded the same file twice.
  handleCheck(fileName) {
    return this.state.uploadedFiles.some(item => fileName === item);
  }

  // Methodly simply deletes a file from the list of uploadedFiles if the user desires to (taken from StackOverflow)
  delete(item) {
    if (window.confirm("Delete '" + item + "'?")) {
      const data = this.state.uploadedFiles.filter(i => i !== item);
      this.setState({ uploadedFiles: data });
    }
  }

  // This method allows the users to physically the see the contents of the PDF they uploaded.
  showFile() {
    const { title } = this.state;
    return (
      <span>
        <Button
          style={{ backgroundColor: "#f57505", width: "165px" }}
          onClick={() => this.openModal()}
        >
          View
        </Button>
        <Modal
          visible={this.state.visible}
          min-width="800"
          min-height="200"
          effect="fadeInDown"
          onClickAway={() => this.closeModal()}
        >
          <div>
            <h1>{title}</h1>
            <embed src={this.state.fileDisplay} width="800px" height="700px"/>
            <br /><br /><input type="text" />
          </div>
        </Modal>
      </span>
    );
  }

  /*
   * This method handles the UI aspect of uploading a file using the FilePicker ReactJS tool. 
   */
  fileUploader() {
    return (
      <div>
        <FilePicker
          extensions={["pdf"]} // Notice that I removed the "."
          onChange={this.handleFileChange}
          onError={errMsg => alert("Invalid file type.\nMust be a .pdf file")} // Please handle error
        >
          <Button style={{ backgroundColor: "#f57505", width: "75px" }}>
            Upload
          </Button>
        </FilePicker>
      </div>
    );
  }

  /*
   * This method physically renders the transcripts in a nicely-formatted manner.
   * First checks to see if there are any transcripts, and then it acts accordingly.
   *
   * No transcripts present = warning message & a button to upload
   * Transcripts present = show them & still have the button to upload more
   */
  renderTranscripts() {
    if (this.state.uploadedFiles.length === 0) {
      return (
        <div>
          <div id="rectanglePadding">
            <div id="nothingToShow">
              <h1>There are no transcripts to display! </h1>
            </div>
          </div>

          <div style={{ textAlign: "center" }}>
            <br />
            <br />
            {this.fileUploader()}
          </div>
        </div>
      );
    }

    const noteItems = this.state.uploadedFiles.map(note => (
      <span>
        <span id="blockStyling">
          <span>
            {""}
            <a id="textStyling">{note}</a>&emsp;
          </span>
          <p />
          <p id="textStyling2">
            Potential Issues: <br />
            &nbsp;&nbsp;- Short by 2 math credits <br />
            &nbsp;&nbsp;- Missing an elective
          </p>
          <br />
          <div style={{ textAlign: "center" }}>
            {this.showFile()}
            <br />
            {/* <Button
              class="floated"
              style={{ backgroundColor: "#f57505", width: "75px" }}
              onClick={this.login}
            >
              Edit
            </Button> */}
            <Button
              style={{ backgroundColor: "#f57505", width: "165px", }}
              onClick={this.delete.bind(this, note)}
            >
              Delete
            </Button>
            <br />
            <br />
          </div>
        </span>
        <br />
        <br />
        <br />
      </span>
    ));

    return (
      <div>
        <br />
        <h1 style={{ textDecoration: "underline", paddingLeft: "30px" }}>
          My Transcripts
        </h1>
        {noteItems}
        <div style={{ textAlign: "center" }}>
          <br />
          <br />
          {this.fileUploader()}
        </div>
      </div>
    );
  }

  /*
   * Simply displays the UI.
   */
  render() {
    return <div>{this.renderTranscripts()}</div>;
  }
}


export default Transcripts; ```