有没有办法用React Slick在一个Carousel中拥有一个Carousel？

import React from 'react';
import Slider from 'react-slick';

const OuterCarousel = () => {
  const outerSettings = {
    // 外层Carousel的设置
    dots: true,
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
  };

  const innerSettings = {
    // 内层Carousel的设置
    dots: true,
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
  };

  return (
    <Slider {...outerSettings}>
      <div>
        <h3>Slide 1</h3>
      </div>
      <div>
        <h3>Slide 2</h3>
      </div>
      <div>
        <h3>Slide 3</h3>
        <Slider {...innerSettings}>
          <div>
            <h4>Inner Slide 1</h4>
          </div>
          <div>
            <h4>Inner Slide 2</h4>
          </div>
          <div>
            <h4>Inner Slide 3</h4>
          </div>
        </Slider>
      </div>
    </Slider>
  );
};

export default OuterCarousel;