diff --git a/packages/react/src/hooks/useIonModal.ts b/packages/react/src/hooks/useIonModal.ts
index aee3ea40e4..bc46f7c26b 100644
--- a/packages/react/src/hooks/useIonModal.ts
+++ b/packages/react/src/hooks/useIonModal.ts
@@ -8,14 +8,18 @@ import type { ReactComponentOrElement } from '../models/ReactComponentOrElement'
 import type { HookOverlayOptions } from './HookOverlayOptions';
 import { useOverlay } from './useOverlay';
 
-// TODO(FW-2959): types
-
 /**
  * A hook for presenting/dismissing an IonModal component
  * @param component The component that the modal will show. Can be a React Component, a functional component, or a JSX Element
  * @param componentProps The props that will be passed to the component, if required
  * @returns Returns the present and dismiss methods in an array
  */
+export function useIonModal(component: JSX.Element, componentProps?: any): UseIonModalResult;
+export function useIonModal<P extends undefined>(component: React.ComponentClass<P> | React.FC<P>): UseIonModalResult;
+export function useIonModal<P extends Record<string, never>>(
+  component: React.ComponentClass<P> | React.FC<P>
+): UseIonModalResult;
+export function useIonModal<P>(component: React.ComponentClass<P> | React.FC<P>, componentProps: P): UseIonModalResult;
 export function useIonModal(component: ReactComponentOrElement, componentProps?: any): UseIonModalResult {
   const controller = useOverlay<ModalOptions, HTMLIonModalElement>(
     'IonModal',
diff --git a/packages/react/src/hooks/useIonPopover.ts b/packages/react/src/hooks/useIonPopover.ts
index c63df7b26e..fdc03cbb05 100644
--- a/packages/react/src/hooks/useIonPopover.ts
+++ b/packages/react/src/hooks/useIonPopover.ts
@@ -8,14 +8,23 @@ import type { ReactComponentOrElement } from '../models/ReactComponentOrElement'
 import type { HookOverlayOptions } from './HookOverlayOptions';
 import { useOverlay } from './useOverlay';
 
-// TODO(FW-2959): types
-
 /**
  * A hook for presenting/dismissing an IonPicker component
  * @param component The component that the popover will show. Can be a React Component, a functional component, or a JSX Element
  * @param componentProps The props that will be passed to the component, if required
  * @returns Returns the present and dismiss methods in an array
  */
+export function useIonPopover(component: JSX.Element, componentProps?: any): UseIonPopoverResult;
+export function useIonPopover<P extends undefined>(
+  component: React.ComponentClass<P> | React.FC<P>
+): UseIonPopoverResult;
+export function useIonPopover<P extends Record<string, never>>(
+  component: React.ComponentClass<P> | React.FC<P>
+): UseIonPopoverResult;
+export function useIonPopover<P>(
+  component: React.ComponentClass<P> | React.FC<P>,
+  componentProps: P
+): UseIonPopoverResult;
 export function useIonPopover(component: ReactComponentOrElement, componentProps?: any): UseIonPopoverResult {
   const controller = useOverlay<PopoverOptions, HTMLIonPopoverElement>(
     'IonPopover',
diff --git a/packages/react/test/base/src/pages/overlay-hooks/ModalHook.tsx b/packages/react/test/base/src/pages/overlay-hooks/ModalHook.tsx
index fe3dfd0c28..240e22fbb8 100644
--- a/packages/react/test/base/src/pages/overlay-hooks/ModalHook.tsx
+++ b/packages/react/test/base/src/pages/overlay-hooks/ModalHook.tsx
@@ -11,10 +11,10 @@ import {
 import { useContext } from 'react';
 
 const Body: React.FC<{
-  type: string;
-  count: number;
+  type?: string;
+  count?: number;
   onDismiss: (data?: any, role?: string) => void;
-  onIncrement: () => void;
+  onIncrement?: () => void;
 }> = ({ count, onDismiss, onIncrement, type }) => (
   <IonPage>
     <IonHeader>
@@ -24,7 +24,7 @@ const Body: React.FC<{
     </IonHeader>
     <IonContent>
       Count in modal: {count}
-      <IonButton expand="block" onClick={() => onIncrement()}>
+      <IonButton expand="block" onClick={() => onIncrement?.()}>
         Increment Count
       </IonButton>
       <IonButton expand="block" onClick={() => onDismiss({ test: true }, 'close')}>
@@ -51,7 +51,7 @@ const ModalHook: React.FC = () => {
     setCount(count + 1);
   }, [count, setCount]);
 
-  const handleDismissWithComponent = useCallback((data: any, role: string) => {
+  const handleDismissWithComponent = useCallback((data?: any, role?: string) => {
     dismissWithComponent(data, role);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);