Is there any option to change the behaviourwhen we click on dots in React-slick?

I want to show a notification if a user clicks on any dot and I also want to prevent moving to the next slide if a user clicks on a dot. Is there a good solution to implement this? Here is the link to react-slick(appendDots example). There you can see the customPaging method. The point is that I want to set up my onClick function to div to change the behavior when the user clicks on a dot. But react-slick puts its onClick, that's why I can't override it. https://react-slick.neostack.com/docs/example/append-dots

I found something That could help you can actually append the dots into different components hence you can add a onClick event example

appendDots={
      dots=><ul>
      {dots.map((dot,key)=><li onClick={()=>openNotification(key)}>{yourdot}</li>)}
      </ul>
    }>

Default for this prop is: dots =>

{dots}

Refer to this link for more info React-Slick