diff --git a/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx b/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
index 45396412d01a..d1148a27a502 100644
--- a/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
@@ -46,10 +46,12 @@ function Tabs(props: Props): JSX.Element {
     }
   }
 
-  const handleTabChange = (event) => {
-    const selectedTab = event.target;
+  const handleTabChange = (
+    event: React.FocusEvent<HTMLLIElement> | React.MouseEvent<HTMLLIElement>,
+  ) => {
+    const selectedTab = event.currentTarget;
     const selectedTabIndex = tabRefs.indexOf(selectedTab);
-    const selectedTabValue = children[selectedTabIndex].props.value;
+    const selectedTabValue = values[selectedTabIndex].value;
 
     setSelectedValue(selectedTabValue);
 
diff --git a/packages/docusaurus-theme-classic/src/types.d.ts b/packages/docusaurus-theme-classic/src/types.d.ts
index ebe36f5d51b6..075a0c8c972a 100644
--- a/packages/docusaurus-theme-classic/src/types.d.ts
+++ b/packages/docusaurus-theme-classic/src/types.d.ts
@@ -429,8 +429,8 @@ declare module '@theme/TabItem' {
   export type Props = {
     readonly children: ReactNode;
     readonly value: string;
-    readonly hidden: boolean;
-    readonly className: string;
+    readonly hidden?: boolean;
+    readonly className?: string;
   };
 
   const TabItem: (props: Props) => JSX.Element;