Making Axis Clickable in Plotly.js with React

Question

I want to make the x-axis in my chart clickable and run a function when it's clicked. I tried the following code but it didn't work.

How do I make it such that the function handleClick executes when I click on the labels in the x-axis?

export default class MyComponent extends React.Component {
    constructor(props){
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    let axis = {
        0: 1,
        1: 1,
        2: 1,
    }

    handleClick(){
        //Do something
    }

    render(){
        let xAxis = [];
        let yAxis = [];

    
        for(let i = 0; i < 3; ++i){
            xAxis.push('<a href="#" onClick="{ handleClick }">' + axis[i] + '</a>');
            yAxis.push(1);
        }

        Plotly.newPlot( document.getElementById('myDiv'), [{
            type: 'bar',
            marker: { color: 'rgb(255, 165, 0)' },
            name: 'MyPlot',
            x: xAxis,
            y: yAxis }],
            {
                margin: {t: 10, b:5},
            }
        );
        return (
            <div id="myDiv" style={{width: '95%', height: '100%'}}></div>
        );
    }
}