Can not access splide instance with ref.current.splide in Nextjs

[sniperyork]

Checks

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

Version

0.7.12

Description

I try to display a list of cards in two rows, controlled by a filter system that updates based on user selection. However, I'm encountering difficulty displaying the data in two rows. It reverts to one row after each update. I suspect this may be due to an issue with the useEffect hook. I tried to access the Splide instance using a ref, but encountered a problem: the refresh() method is not available for the Splide instance. Instead, I receive a type error stating,

"Property 'splide' does not exist on type 'never'."

Can anyone give me some pointers please? below is a shorter version of my code:

const ref = useRef(null)

  useEffect(() => {
    filterData(categories);
    if (ref.current) {
      ref.current.splide.refresh();
    }
  }, [categories]);

        <Splide
          ref={ref}
          hasTrack={false}
          aria-label="cards"
          extensions={{ Grid }}
          className="flex w-full flex-col space-y-[2%] overflow-visible"
          options={{
            perPage: 4,
            gap: "1vw",
            arrows: false,
            pagination: true,
            drag: "free",
            snap: true,
            grid: {
              rows: 2,
              cols: 1,
              gap: {
                row: "1vw",
              },
            },
            padding: {
              right: "5%",
              left: "5%",
            },
          }}
        >
          <SplideTrack>
            {Cards.map((item: any) => {
              const {
                id,
                thumbnail_url
              } = item;
              return (
                <SplideSlide key={id}>
                  <Card
                    thumbnail_url={thumbnail_url}
                    onClick={() => handlePlanChange(id)}
                  />
                </SplideSlide>
              );
            })}
          </SplideTrack>

          <ul className="splide__pagination !bottom-[-4vh] space-x-[.4vw]" />
        </Splide>

Reproduction Link

No response

Steps to Reproduce

1. create a ref using useRef
2. attach the ref to the Splide jsx component
3. create a useEffect hook and follow the instruction on the offcial splide for react document
4. enter ref.current.splide.refresh() in useEffect and observe result ...

Expected Behaviour

display data in two rows

[bradleyDouglas]

@sniperyork Ever figure this out? I'm running into the same issue.