使用内部点击事件访问React ref当前元素？

如何解决使用内部点击事件访问React ref当前元素？

我正在尝试使用在innerHTML组件上附加的事件侦听器访问当前的React ref。

我的问题： 点击功能“ handleDeviceClick”无法正常运行，因为我使用了没有点击事件的ref.current.innerHTML。

我想要的解决方案： 模态打开后，设备点击的工作点击事件。

让我知道更多信息

谢谢。

//export main function
export const SomeComponent = (props) => {
    
    //create refs
    const modalContentRef = React.createRef();

    //handle device clikc 
    const handleDeviceClick = (device) => {
        console.log(device)
    }//()=>{} ends 

    //handle bootbox 
    const handleDevicesModal = (show) => {
        console.log(modalContentRef.current)

        //bootbox modal
        bootbox.dialog({
            message: modalContentRef.current.innerHTML,});//bootbox ends 
    }//()=>{} ends 


    //return render
    return(<>
    <div className="d-flex">
            <span className="d-block font-size-xs text-blue cursor-pointer" 
                onClick={() => {
                    handleDevicesModal()
                }}
            >Change device?</span>
    </div>
    <div className={'d-none'} ref={modalContentRef}>
        <h4>Select your device to continue</h4>
        
        <div className="row">
            {devicesJson.map( (device,i) => (
                <div key={i} className="col-6 col-sm-4 text-center mt-3 ut_device_item" 
                    onClick={() => { 
                        handleDeviceClick(device) /********  THIS CLICK DOESNT WORK  **********/
                    }}
                >
                    <img className="w-50 mx-auto" src={ device.img_url } />
                    <p>{ device.label }</p>
                </div>
            ))}
        </div> 
    </div>
    </>)
}//export ends