diff --git a/packages/moti/package.json b/packages/moti/package.json
index b58324ab..7de72da1 100644
--- a/packages/moti/package.json
+++ b/packages/moti/package.json
@@ -1,7 +1,7 @@
 {
   "name": "moti",
   "description": "The universal React Native animation library, powered by Reanimated 3. 🦉",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "keywords": [
     "react-native",
     "ios",
diff --git a/packages/moti/src/core/use-animator/index.ts b/packages/moti/src/core/use-animator/index.ts
index a246065a..c5ca6070 100644
--- a/packages/moti/src/core/use-animator/index.ts
+++ b/packages/moti/src/core/use-animator/index.ts
@@ -134,7 +134,7 @@ export default function useAnimationState<V extends Variants<V>>(
     to = 'to' as keyof V,
   }: UseAnimationStateConfig<V> = {}
 ) {
-  const controller = useRef<UseAnimationState<V>>()
+  const controller = useRef<UseAnimationState<V>>(null)
   const __state = useSharedValue<InternalControllerState<V>>(
     from ? _variants[from] : 0
   )
diff --git a/packages/moti/src/core/use-dynamic-animation/index.ts b/packages/moti/src/core/use-dynamic-animation/index.ts
index 0a7bdfcb..d829580b 100644
--- a/packages/moti/src/core/use-dynamic-animation/index.ts
+++ b/packages/moti/src/core/use-dynamic-animation/index.ts
@@ -50,7 +50,7 @@ export default function useDynamicAnimation<
 
   const __state = useSharedValue(initializer.current.value)
 
-  const controller = useRef<UseDynamicAnimationState<Animate>>()
+  const controller = useRef<UseDynamicAnimationState<Animate>>(null)
 
   if (controller.current == null) {
     controller.current = {
diff --git a/packages/moti/src/interactions/pressable/hoverable.tsx b/packages/moti/src/interactions/pressable/hoverable.tsx
index 073d3b59..6b2269b1 100644
--- a/packages/moti/src/interactions/pressable/hoverable.tsx
+++ b/packages/moti/src/interactions/pressable/hoverable.tsx
@@ -44,7 +44,12 @@ function isHoverEnabled(): boolean {
   return isEnabled
 }
 
-import React, { useCallback, ReactChild, useRef, useEffect } from 'react'
+import React, {
+  useCallback,
+  ReactElement as ReactChild,
+  useRef,
+  useEffect,
+} from 'react'
 import { useSharedValue, useAnimatedReaction } from 'react-native-reanimated'
 import { HoveredContext } from './hoverable-context'
 import { mergeRefs } from './merge-refs'
@@ -52,7 +57,7 @@ import { mergeRefs } from './merge-refs'
 export interface HoverableProps {
   onHoverIn?: () => void
   onHoverOut?: () => void
-  children: NonNullable<ReactChild>
+  children: ReactChild
   childRef?: React.Ref<any>
 }
 
@@ -123,7 +128,7 @@ export function Hoverable({
     }
   }, [isHovered])
 
-  const child = React.Children.only(children) as React.ReactElement
+  const child = React.Children.only(children)
 
   return (
     <HoveredContext.Provider value={isHovered}>
@@ -131,7 +136,7 @@ export function Hoverable({
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         ref: mergeRefs([localRef, childRef || null]),
-      })}
+      } as any)}
     </HoveredContext.Provider>
   )
 }