Issue with setting input text value to be blank using Refs

Question

I'm having issues with setting my input text fields to be blank using Refs. You could think of my UI that of a mail inbox app. When I click on the side panel, using the func openIssue() to display the issues in <IssueDetails/> by clicking on an issue from <IssueList/>. My problem is that when I enter values into the input text field. That value is carried on into the next issue's text input value after I click on a new issue in the <IssueList/>.

I've used the following as a guide: Clear an input field with Reactjs?, https://reactjs.org/docs/refs-and-the-dom.html however, what I get hit with is TypeError: Cannot set property 'value' of undefined, how do I over come this?

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isLoaded: false,
      issues: [],
      counter: 0,
      selectedIssueId: 0,
      currentSection: "inbox",
      showIssueBox: true
    };

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

  openIssue(id) {
    const issues = this.state.issues;
    let copyOfStateIssues = issues.slice();

    let modifiedStateWithHighlight = copyOfStateIssues.map(obj => {
      if (obj.id !== id) {
        obj.highlighted = false;
      } else {
        obj.highlighted = true;
      }
      return obj;
    });

    this.setState({
      selectedIssueId: id,
      modifiedStateWithHighlight,
      issues: modifiedStateWithHighlight
    });

    this.sendThru();
  }

  sendThru(el) {
    this.inputTitle.value = "";
  }

  render() {
    return (
      <div className="App">
        {this.state.showIssueBox ? (
          <IssueBox
            issues={this.state.issues}
            selectedIssueId={this.state.selectedIssueId}
            onIssueSelected={id => {
              this.openIssue(id);
            }}
            inputRef={el => (this.inputTitle = el)}
          />
        ) : (
          <div />
        )}
      </div>
    );
  }
}

class IssueBox extends Component {
  render() {
    const currentIssue = this.props.issues.find(
      x => x.id === this.props.selectedIssueId
    );

    return (
      <div className="wrapper">
        <div className="inbox-container">
          <IssueList
            issues={this.props.issues}
            onIssueSelected={this.props.onIssueSelected}
            selectedIssueId={this.props.selectedIssueId}
          />
          <IssueDetails
            issues={this.props.issues}
            issue={currentIssue}
            onInputRef={this.props.inputRef}
          />
        </div>
      </div>
    );
  }
}

class IssueDetails extends Component {
  constructor(props) {
    super(props);

    this.state = {
      currentPage: 1,
      urlsPerPage: 5,
      activeItem: 0
    };
  }

  render() {
    const issueDummy = currentURLs.map((obj, i) => {
      const noIssueID = (
        <input
          ref={this.props.onInputRef}
          type="text"
          onChange={this.props.onInputUpdate.bind(this, obj)}
        />
      );

      return (
        <tr role="row" key={i}>
          <td role="cell" style={td4Styles}>
            {issue.verified === true ? hasIssueID : noIssueID}
          </td>
        </tr>
      );
    });

    return (
      <div className="issue-content">
        <div className="issue-content__message">
          <div className="url_div_container">
            <form
              onSubmit={this.props.onVerifiationSubmission.bind(this, issue)}
            >
              <table>
                <tbody className="group-row">{issueDummy}</tbody>
              </table>
            </form>
          </div>
        </div>
      </div>
    );
  }
}

My goal is to clear the text input field of the previously entered after I click on a new issue from <IssueList>, which is triggered by openIssue(). Thus rendering a new set of issues and text input field for < IssueDetails>