Using react-multi-carousel but unable to use custom dots

Question

How I can get clickable custom dots of this carousel. I cannot bind a click event in the list item to move the carousel. I need a proper implementation between onClick and the li item to click on prev and next items in carousel

Here is the full code in the link codebox

const CustomDot = ({onMove,index,onClick,active}) => {   
   return (
    <ol class="carousel-indicators">
    <li data-target="#main-slide" data-slide-to="0" className={active ? "active" : "inactive"}     
      >How t bind the click event list item
  onClick={() => onClick()}>{React.Children.slide1}</li>
    <li data-target="#main-slide" data-slide-to="1" className={active ? "active" : "inactive"}
  onClick={() => onClick()}>{React.Children.slide2} </li>
    <li data-target="#main-slide" data-slide-to="2" className={active ? "active" : "inactive"}
  onClick={() => onClick()}>{React.Children.slide3} </li>
    </ol>
  );
};        

Answer 1

The problem is that the plugin expects to receive a single element (li for example) as CusomtDot but you pass a list (ol with some children).

The solution, pass a single element, like this:

const CustomDot = ({ onMove, index, onClick, active }) => {
  // onMove means if dragging or swiping in progress.
  // active is provided by this lib for checking if the item is active or not.
  return (
    <li
      className={active ? "active" : "inactive"}
      onClick={() => onClick()}
    >
      {index + 1}
    </li>
  );
};

Working demo: https://codesandbox.io/s/react-multi-carousel-customdot-jwkfo