Here is my code:

import React from 'react'

import { useKeenSlider } from 'keen-slider/react'

// Styles
import 'keen-slider/keen-slider.min.css'

interface Props {
    children: any
}
// const animation = { duration: 20000, easing: (t: number) => t }
const Slider = ({ children }: Props) => {
    // Refs
    const [sliderRef] = useKeenSlider<HTMLDivElement>(
        {
            loop: true,
            slides: {
                perView: 4
            }
        },
        [
            (slider) => {
                let timeout: ReturnType<typeof setTimeout>
                let mouseOver = false
                function clearNextTimeout() {
                    clearTimeout(timeout)
                }
                function nextTimeout() {
                    clearTimeout(timeout)
                    if (mouseOver) return
                    timeout = setTimeout(() => {
                        slider.next()
                    }, 2000)
                }
                slider.on('created', () => {
                    slider.container.addEventListener('mouseover', () => {
                        mouseOver = true
                        clearNextTimeout()
                    })
                    slider.container.addEventListener('mouseout', () => {
                        mouseOver = false
                        nextTimeout()
                    })
                    nextTimeout()
                })
                slider.on('dragStarted', clearNextTimeout)
                slider.on('animationEnded', nextTimeout)
                slider.on('updated', nextTimeout)
            }
        ]
    )

    return (
        //   @ts-ignore
        <div ref={sliderRef} className='select-none keen-slider'>
            {React.Children.map(children, (child, i) => (
                <div
                    key={`featuredCape-${i}`}
                    className={`keen-slider__slide sm:h-300 sm:w-300 ${
                        i !== 0 ? '' : ''
                    }`}
                >
                    {child}
                </div>
            ))}
        </div>
    )
}

export default Slider

Here is what I am getting in console size In the keen-slider docs there was an option of setting the selection of size to null that this class is doing. When I did that it did made the size correct but but its giving an error

selector: null selector Error: This is the error after adding selector null

The size is now alright! size after adding selector null