TypeScript Error: 'ScrollSync' cannot be used as a JSX component

[HT-Moh]

Description

Issue
I am encountering a TypeScript error when trying to use ScrollSync from react-scroll-sync in my Next.js project. The error states that ScrollSync's type FC is not a valid JSX element type.

Error Message

python

'ScrollSync' cannot be used as a JSX component.
  Its type 'FC<ScrollSyncProps>' is not a valid JSX element type.
    Type 'FunctionComponent<ScrollSyncProps>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
      Type 'import("/home/bicatalyst/src/profiler/nextjs/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
        Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
          Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.ts(2786)
index.d.ts(175, 9): 'children' is declared here.

Environment

Next.js version: 13.4.12
React version: 18.2.0
TypeScript version: 5.1.6
react-scroll-sync version: 0.11.0
@types/react-scroll-sync version: 0.8.7

Expected Behavior

ScrollSync should be usable as a JSX component without any TypeScript errors.

Actual Behavior

TypeScript throws an error indicating a type mismatch or incompatibility when using ScrollSync as a JSX component.

[okonet]

Feel free to create a PR with a fix. I'd confirm if it's not a usage / next.js related issue though.

[Baboo7]

This is the type declaration file I created as a quick workaround:

// react-scroll-sync.d.ts

import "react-scroll-sync";
declare module "react-scroll-sync" {
  const ScrollSync: React.FC<ScrollSyncProps>;
  const ScrollSyncPane: React.FC<ScrollSyncPaneProps>;

  export = {
    ScrollSync,
    ScrollSyncPane,
  };
}