diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 1b8e7e8..d9c3305 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -57,9 +57,10 @@ const Modal = ({
                 goNext={() => changeStep(stepIndex + 1)}
                 skipTo={changeStep}
                 totalSteps={allSteps.length}
+                close={close}
             />
         ),
-        [stepIndex, changeStep, allSteps.length, NextStepButton],
+        [stepIndex, changeStep, allSteps.length, NextStepButton, close],
     );
     const previousStepButton = useMemo(
         () => (
@@ -68,9 +69,10 @@ const Modal = ({
                 goBack={() => changeStep(stepIndex - 1)}
                 skipTo={changeStep}
                 totalSteps={allSteps.length}
+                close={close}
             />
         ),
-        [stepIndex, changeStep, allSteps.length, PreviousStepButton],
+        [stepIndex, changeStep, allSteps.length, PreviousStepButton, close],
     );
     const stepButtonWrapper = useMemo(
         () => (
diff --git a/src/types.ts b/src/types.ts
index 7ceedad..ce23289 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -3,7 +3,7 @@ import React, { PropsWithChildren, ReactNode } from 'react';
 export type ReactGrandTourProps = ComponentVisibility & {
     open?: boolean;
     onOpen?: () => void;
-    onClose?: (reason: ReactGrandTourCloseReason) => void;
+    onClose?: (reason?: ReactGrandTourCloseReason) => void;
     onStepChange?: (props: OnStepChangeProps) => void;
     openAt?: number;
     steps?: ReactGrandTourStep[];
@@ -189,12 +189,14 @@ export type NextStepButtonProps = {
     totalSteps: number;
     goNext: () => void;
     skipTo: (step: number) => void;
+    close: () => void;
 };
 export type PreviousStepButtonProps = {
     currentStep: number;
     totalSteps: number;
     goBack: () => void;
     skipTo: (step: number) => void;
+    close: () => void;
 };
 export type StepButtonProps = {
     currentStep: number;