Extension not working on React

[celsosa]

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.4.1

Description

The Grid extension in React is not functioning as expected. The slide continues to operate like a standard slider, even with the extension.

Reproduction Link

No response

Steps to Reproduce

Trying something like this:

'use client'
import React from 'react';
import { Splide, SplideSlide } from '@splidejs/react-splide';
import { Grid } from '@splidejs/splide-extension-grid';
import '@splidejs/splide/dist/css/splide.min.css';

function CarouselGrid() {
    return (
        <Splide
        Extensions={{ Grid }}
            options={{
                type: 'loop',
                rewind: true,
                grid: {
                    dimensions: [[1, 1], [3, 1]], // For each slide, the first will be 1x1 and the rest will be 3x1
                    gap: {
                        row: '6px',
                        col: '6px',
                    },
                },
                perPage: 2,
                perMove: 1,
            }}

            className="flex w-full max-w-7xl justify-center"
        >

            <SplideSlide>
                <div className="flex flex-1 min-h-[120px]  items-center justify-center">test</div>

            </SplideSlide>
            <SplideSlide>
                <div className="flex flex-1 min-h-[120px] items-center justify-center">test</div>

            </SplideSlide>
            <SplideSlide>
                <div className="flex flex-1 min-h-[120px] items-center justify-center">test</div>

            </SplideSlide>
            <SplideSlide>
                <div className="flex flex-1 min-h-[120px] items-center justify-center">test</div>

            </SplideSlide>
            <SplideSlide>
                <div className="flex flex-1 min-h-[120px] items-center justify-center">test</div>

            </SplideSlide>
            <SplideSlide>
                <div className="flex flex-1 min-h-[120px] items-center justify-center">test</div>

            </SplideSlide>
        </Splide>
    );
}

export default CarouselGrid

I'm using this versions:
"@splidejs/react-splide": "^0.7.12",
"@splidejs/splide-extension-grid": "^0.4.1",

Expected Behaviour

The grid extension should make the grid works instead of showing just a normal slider(1 per page)

[ShahriarKh]

use extensions instead of Extensions
https://splidejs.com/integration/react-splide/#migrating-from-v3