How can a function value is displayed in a HTML tag with a return value from addEventListerner click?

I am trying to build a calculator and want to print digits on the screen. I have not yet put the calculator algorithm, just only to print the digits in the screen.

const Keys = ({calcKeys})=>(<div className="display-keys"> 
   <div className="screen"><handleClick></div>
      {calcKeys.map((item)=>{
            return <button className="display-keys">{item.key}</button>
      })
 }
 class App extends React.Component { constructor(props) { super(props);
     this.state={calcKeys:[{"key": "AC"},{"key": "CE"},{"key": "±"},{"key": "/"},{"key": "7"},{"key": "8"},{"key": "9"},{"key": "x"},{"key": "4"},{"key": "5"},{"key": "6"},{"key": "-"},{"key": "1"},{"key": "2"},{"key": "3"},{"key": "+"},{"key": "."},{"key": "0"}]};}
      this.displayKeys = this.displayKeys.bind(this)];
      const keyButton = document.querySelector('.display-keys');
      handleClick() {
      keyButton.addEventListener('click', (e) => {
      return const keyPad = e.key;
   });
  } 
render(){
   return(
      <div className="display-container">
       <Keys calcKeys={this.state.calcKeys}/>
      </div> 
    );
 }
}
  ReactDOM.render( <App />, document.getElementById("root"));

Source: ReactJs