1import {createPortal} from 'react-dom';
 2import Box from '@material-ui/core/Box';
 3
 4const Dots = ({children}) => {
 5  const element = document.getElementById('slider-dots');
 6  if (!element) return null;
 7
 8  return createPortal(
 9    <Box
10      className="slick-dots"
11      component="ul"
12      height={1}
13      display="flex"
14      alignItems="center"
15    >
16      <Box display="flex" margin="0 auto">
17        {children}
18      </Box>
19    </Box>,
20    document.getElementById('slider-dots')
21  );
22};
23
24export default Dots;