Why is index always 23 when handleClick() is called. REACT

I am learning React by following concepts from the tic-tac-toe tutorial. I am trying to create an online course providing platform. I have a bunch of filter buttons, each indicating a topic for course, for example, “Applied Mathematics”. Since, there are a lot of filter buttons to display, I created an array of filter buttons, by populating them from a filter list array – which contains relevant data for each filter. This is the function that does this:

renderFilters() {
        this.filterButtonList = [];
        for (var index in this.filterList) {
            index = parseInt(index);
            var item = (
                <FilterButton
                    key={this.filterList[index].param}
                    text={this.filterList[index].text}
                    param={this.filterList[index].param}
                    isActive={this.state.isActive[index]}
                    onClick={() => {
                        this.handleClick.bind(index);
                        this.handleClick(index);
                    }}
                />
            );
            this.filterButtonList.push(item);
        }
        return this.filterButtonList;
    }

The filter list looks something like this:

this.filterList = [
            { text: "All Topics", param: "all-topics" },
            { text: "Algorithms and Data Structures", param: "#cat=engineering&subcat=computerscience&spec=algorithmsanddatastructures" },
            { text: "Artificial Intelligence", param: "#cat=engineering&subcat=computerscience&spec=artificialintelligence" },
            { text: "Computer Design and Engineering", param: "#cat=engineering&subcat=computerscience&spec=computerdesignandengineering" },
            { text: "Computer Networks", param: "#cat=engineering&subcat=computerscience&spec=computernetworks" },
            { text: "Cryptography", param: "#cat=engineering&subcat=computerscience&spec=cryptography" },
            { text: "Data Mining", param: "#cat=engineering&subcat=computerscience&spec=datamining" },
            { text: "Graphics and Visualization", param: "#cat=engineering&subcat=computerscience&spec=graphicsandvisualization" },
            { text: "Human-Computer Interfaces", param: "#cat=engineering&subcat=computerscience&spec=humancomputerinterfaces" },
            { text: "Operating Systems", param: "#cat=engineering&subcat=computerscience&spec=operatingsystems" },
            { text: "Programming Languages", param: "#cat=engineering&subcat=computerscience&spec=programminglanguages" },
            { text: "Software Design and Engineering", param: "#cat=engineering&subcat=computerscience&spec=softwaredesignandengineering" },
            { text: "Theory of Computation", param: "#cat=engineering&subcat=computerscience&spec=theoryofcomputation" },
            { text: "Algebra and Number Theory", param: "#cat=mathematics&subcat=algebraandnumbertheory" },
            { text: "Applied Mathematics", param: "#cat=mathematics&subcat=appliedmathematics" },
            { text: "Calculus", param: "#cat=mathematics&subcat=calculus" },
            { text: "Computation", param: "#cat=mathematics&subcat=computation" },
            { text: "Differential Equations", param: "#cat=mathematics&subcat=differentialequations" },
            { text: "Discrete Mathematics", param: "#cat=mathematics&subcat=discretemathematics" },
            { text: "Linear Algebra", param: "#cat=mathematics&subcat=linearalgebra" },
            { text: "Mathematical Analysis", param: "#cat=mathematics&subcat=mathematicalanalysis" },
            { text: "Mathematical Logic", param: "#cat=mathematics&subcat=mathematicallogic" },
            { text: "Probability and Statistics", param: "#cat=mathematics&subcat=probabilityandstatistics" },
            { text: "Topology and Geometry", param: "#cat=mathematics&subcat=topologyandgeometry" },
        ];

And, the implementation for the <FilterButton> is this:

class FilterButton extends React.Component {
    render() {
        return (
            <button
                className={this.props.isActive === "true" ? "filters-button active" : "filters-button"}
                onClick={() => {
                    this.props.onClick();
                }}
            >
                {this.props.text}
            </button>
        );
    }
}

The implementation for handleClick(i) is this:

handleClick(i) {
    #Nothing fancy, just trying to display the value of the passed index.
    console.log(i);
}

However, clicking on any of the buttons only prints “23”, rather than printing the index of the button clicked – for example, if I click on “All Topics” button – which has a index of “0” in this filter list, it should print “0”, not “23”. The same is true, if instead of index I passed something like this.filterList[index].text to display the button text – in which case, if I click on something like “Applied Mathematics” button or “Linear Algebra” button, it only prints “Topology and Geometry” (which is the value from last row of filter list). What am I doing wrong?