How can I fix the "Property 'goToNext' does not exist" with Preline UI in React TS?

[zdacoderr]

im using the Preline Stepper in a React + TypeScript project. I'm able to get an object back from HSStepper.getInstance(), but I'm running into a TypeScript error when I try to call the .goToNext() method on it.

When I call HSStepper.getInstance(), it successfully returns an object. However, when I try to call .goToNext() on that object, TypeScript gives me an error:

Property 'goToNext' does not exist on type 'ICollectionItem'.

I've checked the documentation and my type declarations, but I can't figure out the correct way to access the instance methods. Any help would be greatly appreciated.

Here is my setup:

1. Preline Initialization (App.tsx)

Preline is initialized globally and re-initializes on every route change.

// src/App.tsx
import { useEffect } from "react";
import { Outlet, useLocation } from "react-router";

async function loadPreline() {
return await import("preline/dist/index.js");
}

function App() {
const location = useLocation();

useEffect(() => {
const initPreline = async () => {
await loadPreline();
if (window.HSStaticMethods) {
window.HSStaticMethods.autoInit();
}
};
initPreline();
}, [location.pathname]);

return ;
}

export default App;

2. Type Declarations (global.d.ts)

I've declared the types for Preline based on its package structure.

// src/types/global.d.ts
import type { IStaticMethods, HSStepper } from "preline/dist";

declare global {
interface Window {
HSStepper?: typeof HSStepper;
HSStaticMethods?: IStaticMethods;
}
}

export {};

3. Register.tsx
   ....
   if (window.HSStepper) {
   window.HSStepper.getInstance("#data-hs-stepper").goToNext();
   }

...

why?