Accessing Elements in React

I just finished the base of the drum machine project and wanted some input on accessing html tags

Currently I am doing this type of way which seems to work with no issue.

handleClick(e) {
    e.target.children[0].play();
    this.setState({
      displayText: e.target.id
    });
  handleKeyPress(e) {
    const checkLetter = /[QWEASDZXC]/.test(e.key.toUpperCase());

    if (checkLetter && !this.state.fired) {
      const key = "#" + e.key.toUpperCase();
      const element = document.querySelector(key);
      element.play();
      this.setState({
        fired: true,
        displayText: element.parentElement.id
      });
    }
  }

However, when researching how to do it references came up and they seem very redundant for something of this scale.

In Reacts Docs they show you doing something like this for accessing DOM elements.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}
const node = this.myRef.current; /// to access