diff --git a/src/utilities/dot-notation.types.ts b/src/utilities/dot-notation.types.ts
index 7ce82ea..6700a21 100644
--- a/src/utilities/dot-notation.types.ts
+++ b/src/utilities/dot-notation.types.ts
@@ -29,9 +29,16 @@ export type StyleProp<T> =
 // ---------- Type Helpers ----------
 
 // Unwrap nested arrays (from RecursiveArray)
-type UnwrapRecursiveArray<T> = T extends (infer I)[]
-  ? UnwrapRecursiveArray<I>
-  : T;
+type UnwrapRecursiveArray<
+  T,
+  Depth extends unknown[] = [],
+  MaxDepth extends number = 10
+> = Depth["length"] extends MaxDepth
+  ? T
+  : T extends (infer I)[]
+    ? UnwrapRecursiveArray<I, [...Depth, unknown], MaxDepth>
+    : T;
+
 
 // Remove null, false, undefined, etc.
 type RemoveFalsy<T> = Exclude<T, Falsy>;
diff --git a/src/web/api.tsx b/src/web/api.tsx
index 73543f3..5398813 100644
--- a/src/web/api.tsx
+++ b/src/web/api.tsx
@@ -1,7 +1,7 @@
 import {
   createElement,
   useMemo,
-  type ComponentProps,
+  type ComponentPropsWithRef,
   type PropsWithChildren,
 } from "react";
 import { Appearance } from "react-native";
@@ -25,7 +25,7 @@ export const styled = <
   mapping: M,
   _options?: StyledOptions,
 ) => {
-  return (props: StyledProps<ComponentProps<C>, M>) => {
+  return (props: StyledProps<ComponentPropsWithRef<C>, M>) => {
     return useCssElement(baseComponent, mapping, props);
   };
 };