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

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

Answer 2

const CustomDot = ({ onMove, index, onClick, active }) => {
return (
<li
className={active ? "active" : "inactive"}
onClick={() => onClick()}
>
<MaximizeIcon />
</li>
);
};
const arrowStyle = {
background: "transparent",
border: 0,
color: "#fff",
fontSize: "80px"
};
const CustomRight = ({ onClick }) => (
<button className="arrow right" onClick={onClick} style={arrowStyle}>
<ArrowForwardIcon style={{ fontSize: "50px" }} />
</button>
);
const CustomLeft = ({ onClick }) => (
<button className="arrow left" onClick={onClick} style={arrowStyle}>
<ArrowBackIcon style={{ fontSize: "50px" }} />
</button>
);
Working demo : https://codesandbox.io/s/react-multi-carousel-customdot-3q0f4?file=/src/App.js:683-1052