Fix type error in walkthroughable

Author: mohebifar

README.md

@@ -141,17 +141,21 @@ By default, if overlay is not explicitly specified, the `svg` overlay will be us
 You can customize the tooltip and the step number components by passing a component to the `CopilotProvider` component. If you are looking for an example tooltip component, take a look at [the default ui implementations](https://github.com/mohebifar/react-native-copilot/blob/master/src/components/default-ui).
 
 ```js
-const TooltipComponent = ({
-  isFirstStep,
-  isLastStep,
-  handleNext,
-  handleNth,
-  handlePrev,
-  handleStop,
-  currentStep,
-}) => (
-  // ...
-);
+const TooltipComponent = () => {
+  const {
+    isFirstStep,
+    isLastStep,
+    handleNext,
+    handleNth,
+    handlePrev,
+    handleStop,
+    currentStep,
+  } = useCopilot();
+
+  return (
+    // ...
+  )
+};
 
 
 <CopilotProvider tooltipComponent={TooltipComponent} stepNumberComponent={StepComponent}>

src/hocs/walkthroughable.tsx

@@ -1,20 +1,18 @@
 import React, { type FunctionComponent } from "react";
 import { type NativeMethods } from "react-native/types";
 
-type PropsWithCopilot<P> = P & {
-  copilot: {
-    ref?: React.RefObject<NativeMethods>;
-    onLayout?: () => void;
-  };
-};
+interface CopilotType {
+  ref?: React.RefObject<NativeMethods>;
+  onLayout?: () => void;
+}
 
 export function walkthroughable<P = any>(
-  WrappedComponent: React.ComponentType<P>
+  WrappedComponent: React.ComponentType<P>,
 ) {
-  const Component: FunctionComponent<PropsWithCopilot<P>> = ({
-    copilot,
-    ...props
-  }) => <WrappedComponent {...(copilot as any)} {...props} />;
+  const Component: FunctionComponent<P> = (props: P) => {
+    const { copilot, ...rest } = props as { copilot: CopilotType } & P;
+    return <WrappedComponent {...copilot} {...(rest as any)} />;
+  };
 
   Component.displayName = "Walkthroughable";