convert React Functional Component into Class with Props

Question

I was hoping to find some help with this issue I have been having converting a file into a class based Component. I've struggled with this one for awhile, and I just cannot get the onClick to work correctly. Everything else renders fine, but the click function simply does not work. I would greatly appreciate any tips, feedback, or help!

 import * as React from 'react';
    import "./bsi-tabs.scss"
    import IBsiTabProps from "./ibsi-tab-props"
    
    
      
    function Tab ({
        onClick = function(){return; },
        tabIndex = '',
        tabID = ''
    
    }: IBsiTabProps) {
        return (
          <li>
            <a
              
              onClick={(event) => {
                event.preventDefault();
                onClick(tabIndex);
              }}
              href="/#"
            >
              {tabID}
            </a>
          </li>
        );
    }
    export default BsiTab;

my attempt at conversion :

import * as React from 'react';
import "./bsi-tabs.scss"
import IBsiTabProps from "./ibsi-tab-props"

/*
    Credit https://gist.github.com/diegocasmo/5cd978e9c5695aefca0c6a8a19fa4c69 for original
    js files, edited by Robert McDonnell to convert to typescript
*/  
export class BsiTab extends React.Component<IBsiTabProps, any> {
  
  onClick = function(){return; }
    tabIndex = ''
    tabID = ''
  
    render(){
    return (
      <li>
        <a
          
          onClick={(event) => {
            event.preventDefault();
            this.onClick(this.props.tabIndex);
          }}
          href="/#"
        >
          {this.props.tabID}
        </a>
      </li>
    );
        }
}

export default BsiTab;

interface : 
export default interface IBsiTabProps {
    onClick      ?: Function;
    tabIndex     ?: Number | string;
    tabID: String;
    children : React.ReactNode;
}