Why is the onClick event not firing?

Question

JavaScript

There is such a component (I removed everything superfluous from it)
OnClick={() => {alert(1)}} is written in WorkItem elements, but for some reason the event does not work, what could it be?
PS I checked that there were no other elements on top of the element, i.e. Nothing prevents clicking on the element.

import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

import WorkItem from '../WorkItem';

class PortfolioSectionPanel extends React.Component {

    constructor() {
        super();

        

    }
    
    render() {


        //Расположение кругов
        let workItems;

        if(this.state.showWorks) {
            let {works} = this.state;

            const angleRad = 360 / works.length * 0.017; //Частота кругов в радианах
            const bg = document.getElementById('portfolio-panel-disk');
            let radius;
            if(bg) {
                radius = parseInt(getComputedStyle(bg).width) / 2;
            }

            workItems = works.map((currentValue, index) => {
                return <WorkItem
                        onClick={() => {alert(1)}} 
                        type={currentValue.type} 
                        link={currentValue.link} 
                        key={index + 50} 
                        leftOffset={radius - radius * Math.cos(angleRad * index)}
                        topOffset={radius - radius * Math.sin(angleRad * index)}
                        angle={-this.state.wheelAngleinDeg}  />
            })
        } else {
            workItems = null;
        }

        let diskStyle = {
            transform: `translate(-50%,-50%) rotate(${this.state.wheelAngleinDeg}deg)`,
        };

                                    
         

        return(

            <div className='portfolio-panel' id='porfolioPanel' ref={this.props.link}>
                <div className='portfolio-panel-background' 
                     ref={this.props.linkCircle} 
                     onTransitionEnd={(e) => {this.showWorks(e)}}
                 >
                    <ReactCSSTransitionGroup onTransitionEnd={(e) => {e.stopPropagation()}}
                        transitionName='portfolio-panel__information'
                        transitionEnterTimeout={500}
                        transitionLeaveTimeout={500}>
                            {middleElementCircle}
                    </ReactCSSTransitionGroup>
                    <div style={diskStyle} className='portfolio-panel-disk' id='portfolio-panel-disk'>
                        <ReactCSSTransitionGroup onTransitionEnd={(e) => {e.stopPropagation()}}
                        transitionName='work-item'
                        transitionEnterTimeout={500}
                        transitionLeaveTimeout={500}>
                            {workItems}
                        </ReactCSSTransitionGroup>
                    </div>
                </div>
            </div>
        )
    }
}
    

export default PortfolioSectionPanel;

Answer 1

in the WorkItem itself there is an onClick handler on the html element?
onClick can only be hung on an html element, on a div, for example, some, or what kind of item

<WorkItem onClick={() => {alert(1)}} />

class WorkItem extends React.Component {
  render() {
    return <div onClick = {this.props.onClick}>i am clickable work item</div>
  }
}

Answer 2

but like this?

<WorkItem
                        onClick={() => alert(1)} 
                        type={currentValue.type} 
                        link={currentValue.link} 
                        key={index + 50} 
                        leftOffset={radius - radius * Math.cos(angleRad * index)}
                        topOffset={radius - radius * Math.sin(angleRad * index)}
                        angle={-this.state.wheelAngleinDeg}  />

Answer 3

Use radioButton instead of checkbox?