useRef with TypeScript

Is this a bug report, a feature request, or a question?

Bug report.

Have you followed the required steps before opening a bug report?

• I have read the guidelines regarding bug report.
• I have reviewed the documentation in its entirety, including the dedicated documentations 📚.
• I have searched for existing issues and made sure that the problem hasn't already been reported.
• I am using the latest plugin version.
• I am following the issue template closely in order to produce a useful bug report.

Have you made sure that it wasn't a React Native bug?

Yes

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

TypeScript related.

Is the bug reproductible in a production environment (not a debug one)?

Yes

Environment

info Fetching system and libraries information...
System:
    OS: macOS 10.15.5
    CPU: (16) x64 AMD Ryzen 7 1700X Eight-Core Processor         
    Memory: 166.43 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.18.0 - ~/.nvm/versions/node/v12.18.0/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v12.18.0/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.18.0/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
  IDEs:
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  npmPackages:
    react: 16.13.1 => 16.13.1 
    react-native: https://github.com/expo/react-native/archive/sdk-37.0.0.tar.gz => 0.61.4

Expected Behavior

That TypeScript does not error when using useRef.

Actual Behavior

TypeScript warns that refs are not compatible.

Steps to Reproduce

const carouselRef = useRef<Carousel<Item>>(null)

<Carousel ref={carouselRef} />

Will error:

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<CarouselProperties<Item>>): Carousel<Item>', gave the following error.
    Type 'MutableRefObject<Carousel<Item>>' is not assignable to type 'string | (string & ((instance: ScrollViewProps) => void)) | (string & RefObject<ScrollViewProps>) | (string & ((instance: CarouselStatic<Item>) => void)) | ... 22 more ... | (RefObject<...> & ... 1 more ... & RefObject<...>)'.
      Type 'MutableRefObject<Carousel<Item>>' is not assignable to type 'React.RefObject<...> & React.RefObject<...> & React.RefObject<...>'.
        Type 'MutableRefObject<Carousel<Item>>' is not assignable to type 'RefObject<CarouselStatic<Item>>'.
          Types of property 'current' are incompatible.
            Type 'Carousel<Item>' is missing the following properties from type 'CarouselStatic<Item>': currentIndex, currentScrollPosition, startAutoplay, stopAutoplay, and 4 more.
  Overload 2 of 2, '(props: CarouselProperties<Item>, context?: any): Carousel<Item>', gave the following error.
    Type 'MutableRefObject<Carousel<Item>>' is not assignable to type 'string | (string & ((instance: ScrollViewProps) => void)) | (string & RefObject<ScrollViewProps>) | (string & ((instance: CarouselStatic<Item>) => void)) | ... 22 more ... | (RefObject<...> & ... 1 more ... & RefObject<...>)'.
      Type 'MutableRefObject<Carousel<Item>>' is not assignable to type 'React.RefObject<...> & React.RefObject<...> & React.RefObject<...>'.
        Type 'MutableRefObject<Carousel<Item>>' is not assignable to type 'RefObject<CarouselStatic<Item>>'.

I also tried typing the useRef with CarouselStatic but this didn't help.

I see that I can also do:

<Carousel ref={(ref) => (carouselRef.current = ref)} />

Although I am not sure the typings are correct?

Start by reproducing the useRef snippet from the issue against the package's TypeScript declarations, then inspect the Carousel ref typing implicated by the compiler error. Done means a correctly typed useRef can be passed to Carousel without the reported overload or ref incompatibility errors.