Responsive settings not working in functional component

I'm using these settings in a functional component:
```
const sliderSettings: Settings = {
dots: false,
infinite: true,
slidesToScroll: 1,
draggable: true,

responsive: [
{
breakpoint: 1080,
settings: {
slidesToShow: 1,
},
},
{
breakpoint: 1480,
settings: {
slidesToShow: 2,
},
},
{
breakpoint: 1800,
settings: {
slidesToShow: 3,
},
},
],
};
```

This is not working, however when changing my component to a class-based one, it does seem to work