diff --git a/example/storybook/src/getting-started/Styled/index.stories.mdx b/example/storybook/src/getting-started/Styled/index.stories.mdx
index fde108d28..9a91c2fa0 100644
--- a/example/storybook/src/getting-started/Styled/index.stories.mdx
+++ b/example/storybook/src/getting-started/Styled/index.stories.mdx
@@ -32,7 +32,7 @@ const StyledButton = styled(
     },
   },
   componentConfig,
-  extenedBaseConfig
+  extendedBaseConfig
 );
 ```
 
@@ -47,7 +47,7 @@ To configure **`styled`**, create a **`gluestack-style.config.ts`** file (**`.j
 - Component
 - componentStyleConfig
 - componentConfig
-- extenedBaseConfig
+- extendedBaseConfig
 
 ### componentConfig
 
@@ -79,11 +79,11 @@ To configure **`styled`**, create a **`gluestack-style.config.ts`** file (**`.j
    }
    ```
 
-   Note: For this to work you also need to add the prop in `propertyTokenMap`, that can be defined in the next parameter of styled function i.e. **extenedBaseConfig**.
+   Note: For this to work you also need to add the prop in `propertyTokenMap`, that can be defined in the next parameter of styled function i.e. **extendedBaseConfig**.
 
-### extenedBaseConfig
+### extendedBaseConfig
 
-**`extenedBaseConfig`** is a object that lets you extend the base config for the component. This is useful when you want to define some aliases, tokens, propertyTokenMap,
+**`extendedBaseConfig`** is a object that lets you extend the base config for the component. This is useful when you want to define some aliases, tokens, propertyTokenMap,
 and propertyResolver that is specific to the component.
 
 ```tsx
diff --git a/example/storybook/src/overview/API/index.stories.mdx b/example/storybook/src/overview/API/index.stories.mdx
index 23a6b0be2..484fc5379 100644
--- a/example/storybook/src/overview/API/index.stories.mdx
+++ b/example/storybook/src/overview/API/index.stories.mdx
@@ -25,7 +25,7 @@ const StyledButton = styled(
     },
   },
   {}, // componentConfig,
-  {} // extenedBaseConfig,
+  {} // extendedBaseConfig,
 );
 ```
 
@@ -63,9 +63,9 @@ const StyledButton = styled(
    }
    ```
 
-   Note: For this to work you also need to add the prop in `propertyTokenMap`, that can be defined in the next parameter of styled function i.e. **extenedBaseConfig**.
+   Note: For this to work you also need to add the prop in `propertyTokenMap`, that can be defined in the next parameter of styled function i.e. **extendedBaseConfig**.
 
-## extenedBaseConfig
+## extendedBaseConfig
 
 extendedBaseConfig is an object that let’s you extend the base config for the component. This is useful when you want to define some aliases, tokens, propertyTokenMap,
 and propertyResolver that is specific to the component.
@@ -244,7 +244,7 @@ const StyledInput = styled(
     },
   },
   componentConfig,
-  extenedBaseConfig
+  extendedBaseConfig
 );
 ```
 
@@ -267,7 +267,7 @@ const StyledInput = styled(
     },
   },
   componentConfig,
-  extenedBaseConfig
+  extendedBaseConfig
 );
 ```
 
@@ -296,7 +296,7 @@ const StyledInput = styled(
     },
   },
   componentConfig,
-  extenedBaseConfig
+  extendedBaseConfig
 );
 ```
 
@@ -321,7 +321,7 @@ const StyledInput = styled(
     borderRadius: '$2',
   },
   componentConfig,
-  extenedBaseConfig
+  extendedBaseConfig
 );
 
 <StyledInput sx={{ py: '$4' }} />;
@@ -342,7 +342,7 @@ const StyledInput = styled(
     borderRadius: '$2',
   },
   componentConfig,
-  extenedBaseConfig
+  extendedBaseConfig
 );
 
 <StyledInput py="$4" bg="$gray800" />;
diff --git a/packages/react/package.json b/packages/react/package.json
index 107856457..a6d318d7b 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@gluestack-style/react",
   "description": "A universal & performant styling library for React Native, Next.js & React",
-  "version": "0.2.21",
+  "version": "0.2.22",
   "keywords": [
     "React Native",
     "Next.js",
diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx
index 204fe9207..402536b04 100644
--- a/packages/react/src/styled.tsx
+++ b/packages/react/src/styled.tsx
@@ -707,9 +707,15 @@ export function getVariantProps(
 
   if (restProps) {
     variantTypes?.forEach((variant) => {
-      if (props.hasOwnProperty(variant)) {
+      if (
+        props.hasOwnProperty(variant) &&
+        theme.variants[variant]?.[props[variant]]
+      ) {
         variantProps[variant] = props[variant];
-        if (shouldDeleteVariants) delete restProps[variant];
+
+        if (shouldDeleteVariants) {
+          delete restProps[variant];
+        }
       }
     });
   }
@@ -1119,7 +1125,8 @@ export function verboseStyled<P, Variants, ComCon>(
 
     Object.assign(themeDefaultProps, incomingComponentProps);
 
-    const { variantProps } = getVariantProps(themeDefaultProps, theme);
+    const { variantProps, restProps: componentPropsWithoutVariants } =
+      getVariantProps(themeDefaultProps, theme);
 
     const {
       baseStyleCSSIds: applyBaseStyleCSSIds,
@@ -1143,7 +1150,7 @@ export function verboseStyled<P, Variants, ComCon>(
 
     const { sx: filteredComponentSx, rest: filteredComponentRemainingProps } =
       convertUtiltiyToSXFromProps(
-        componentProps,
+        componentPropsWithoutVariants,
         styledSystemProps,
         componentStyleConfig
       );