Slider react-slick

Question

"react-slick": "^0.30.2",

I have data:

const mockedData = [
    {
        title: "Junior",
        columns: [{ title: "Column 1" }],
    },
    {
        title: "Mid",
        columns: [{ title: "Column 1" }, { title: "Column 2" }, { title: "Column 3" }],
    },
    {
        title: "Senior",
        columns: [{ title: "Column 1" }, { title: "Column 2" }, { title: "Column 3" }],
    },
    {
        title: "Expert",
        columns: [{ title: "Column 1" }],
    },
];

the first item(Junior) has 1 column, 2-3 items have 3 columns, 4th(Expert) has 1 column.

Trying to implement a slider, but no idea how to move column by column. When I'm trying to implement it is moving 1-3-3-3-1, I want as I said sliding one by one 1-1-1-1-1-1...

Trying to do

  export const TestPage: FC = () => {
    const sliderRef = useRef(null);

    const handleNext = () => {
        sliderRef.current.slickNext();
    };

    const handlePrev = () => {
        sliderRef.current.slickPrev();
    };
    const settings = {
        infinite: false,
        slidesToShow: 2,
        slidesToScroll: 1,
        variableWidth: true,
    };
    return (
        <Layout>
            <div style={{ textAlign: "center", marginBottom: 12 }}>
                <Button onClick={handlePrev}>Previous</Button>
                <Button onClick={handleNext}>Next</Button>
            </div>
            <div className={styles.objectsContainer}>
                <Slider ref={sliderRef} {...settings} className={styles.slider}>
                    {mockedData.map((item, index) => (
                        <div
                            key={index}
                            className={styles.objectContainer}
                            style={{ width: 306 * item.columns.length }}
                        >
                            <h2>{item.title}</h2>
                            <div className={styles.columnsContainer}>
                                {item.columns.map((column, columnIndex) => (
                                    <div key={columnIndex} style={{ width: 306 }}>
                                        <p>{column.title}</p>
                                    </div>
                                ))}
                            </div>
                        </div>
                    ))}
                </Slider>
            </div>
        </Layout>
    );
};