conditional passing functions as props to a component

i have this breadcrump component that map over props and renders a list of chip components like this:

class BreadCrumb extends React.Component {
    render () {
      const {
        steps,
        activeIndex
      } = this.props;

      const chips = steps
        .map((step,index) => {

          return <Chip 
                  key={index} 
                  title={step.category} 
                  onClick = {()=> this.props.selectChip(index)}   // this should be passed only if 
                                                                  //                active == true
                  active={activeIndex >= index} />
              })

      return (
        <div className="chip-container">
            {chips}
        </div>
      )
    }
  }

i need to click on chips only if his active prop is true, this is the chip component

class Chip extends React.Component {
    render(){
      const {
        active,
        title
      } = this.props;

      const activeClassName = active ? 'chip active' : 'chip';

      return (
        <div 
            className = {activeClassName}
            onClick = {() => this.props.onClick()} >  
              <span>{title}</span>
        </div>
      )

    }
  }

how can i make chip clickable only if the active prop is true?

For further information selectChip() function sets the state of a component App, parent of Breadcrump component, so it is binded to App component.