Problem on ref in typescript

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/s/swiper-default-react-forked-scddn?file=/src/App.tsx

Bug description

i want to use ref in typescript but i got this error on IDE and build time

this is my code: const swiperRef = useRef() as React.RefObject<any> <Swiper ref={swiperRef} className="mySwiper">

this is error message: Type '{ children: Element[]; ref: RefObject<any>; className: string; }' is not assignable to type 'IntrinsicAttributes & SwiperProps & { children?: ReactNode; }'. Property 'ref' does not exist on type 'IntrinsicAttributes & SwiperProps & { children?: ReactNode; }'

i’m not sure i’m doing something wrong or this is a bug.

Expected Behavior

No response

Actual Behavior

No response

Swiper version

7.3.1

Platform/Target and Browser Versions

chrome

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn’t already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I’m willing to open a PR

[wibed]

you could create your own union type using:

const RefSwiper: React.FunctionComponent<
  SwiperProps & RefAttributes<SwiperCore>
> = Swiper;

[mattvb91]

Just came across the same issue and my current hack is to do the following:

  const swiper = useRef() as any;

<Swiper
          onInit={(core: SwiperCore) => {
            swiper.current = core.el
          }}
/>