Slider Settings responsive breaks when add a Left component

[EvansGxz]

const settings = {
  dots: false,
  lazyLoad: true,
  infinite: true,
  speed: 500,
  slidesToShow: 6,
  slidesToScroll: 1,
  initialSlide: 0,
  swipeToSlide: true,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        dots: false,
  lazyLoad: true,
  infinite: true,
  speed: 500,
  slidesToShow: 4,
  slidesToScroll: 1,
  initialSlide: 0,
  swipeToSlide: true,
      },
    },
    {
      breakpoint: 600,
      settings: {
        dots: false,
        lazyLoad: true,
        infinite: true,
        speed: 500,
        slidesToShow: 4,
        slidesToScroll: 1,
        initialSlide: 0,
        swipeToSlide: true,
      },
    },
  ],
  nextArrow: <CustomArrow />,
  prevArrow: <CustomArrow />,
};

const CategorySelect = ({
  categories,
  selectedCategoryId,
  onSelectCategory,
}) => {
  const handleClick = (categoryId) => {
    onSelectCategory(categoryId);
  };

  return (
    <>
    <Wrapper>
      <Slider {...settings}>
        {categories.map((category, index) => (
          <div data-index={index}>
            <div
              key={index}
              onClick={() => handleClick(category.id)}
              isSelected={category.id === selectedCategoryId}
            >
             <Img src={FutbolIcon} alt="img" isSelected={category.id === selectedCategoryId}/>
              <CategoryName>{category.name}</CategoryName>
            </div>
          </div>
        ))}
      </Slider>
    </Wrapper>
    </>
  );
};

So in a MainComponent I have:

<>
      <Container>
        <Sidebar>
          {/* Example: */}
          <p>Sidebar Content</p>
        </Sidebar>
        <MainContent>
          <CategorySelect
            categories={categoriesData}
            selectedCategoryId={selectedCategoryId}
            onSelectCategory={handleSelectCategory}
          />
          <VideoList videos={filteredExperiences} />
        </MainContent>
      </Container>
    </>

const Container = styled.div`
  display: flex;
  min-height: 100vh;
`;

const MainContent = styled.div`
  flex: 1;
  display: flex;
  flex-direction: column;
`;

When a responsive breakpoint its validate the Slider bugs and hide the data inside the Slider. Only happen when make it responsive