reactjs - React slick + 反応タブ

Question

この 2 つのパッケージを組み合わせるのを手伝ってください。

次のようなタブのスライダーが必要です。

< | tab 1 | tab 2 | tab 3 | tab 4 | > 
-------------------------------------
|              Panel                |
-------------------------------------

私がやること？スライダーに必要なタブをラップします。

import Slider from "react-slick";
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';


const sliderProps = {
    dots: false,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    centerMode: true,
    variableWidth: true,
    infinite: false
};

...

<Tabs>
    <TabList>
        <Slider {...sliderProps}>
                
            <Tab>1</Tab>
                                        
            <Tab>2</Tab>
                     
            <Tab>3</Tab>
                     
        </Slider>
    </TabList>
    <TabPanel>
      Sample content 1
    </TabPanel>
    <TabPanel>
      Sample content 2
    </TabPanel>
    <TabPanel>
      Sample content 3
    </TabPanel>
</Tabs>

しかし、任意のタブをクリックすると、最初のタブがアクティブになり、それ以降のクリックは機能しません。そしてcolsoleでエラーが発生します： Warning: Failed prop type: Invalid prop `tabIndex` of type `number` supplied to `Tab`, expected `string`.

ライブコード