diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index f6d7591ab..581ff8e7f 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import type { Preview } from '@storybook/react'
 
 import './index.css'
diff --git a/.storybook/stories/Adaptive.stories.tsx b/.storybook/stories/Adaptive.stories.tsx
index 3b12db54f..dd1825878 100644
--- a/.storybook/stories/Adaptive.stories.tsx
+++ b/.storybook/stories/Adaptive.stories.tsx
@@ -1,4 +1,5 @@
-import React, { ComponentProps, Suspense } from 'react'
+import * as React from 'react'
+import { ComponentProps, Suspense } from 'react'
 import { Vector3, type Material, type Mesh } from 'three'
 import { Meta, StoryObj } from '@storybook/react'
 
diff --git a/.storybook/stories/ArcballControls.stories.tsx b/.storybook/stories/ArcballControls.stories.tsx
index 10b61c250..f7ea16410 100644
--- a/.storybook/stories/ArcballControls.stories.tsx
+++ b/.storybook/stories/ArcballControls.stories.tsx
@@ -1,5 +1,6 @@
+import * as React from 'react'
 import { createPortal, useFrame } from '@react-three/fiber'
-import React, { ComponentProps, useRef, useState } from 'react'
+import { ComponentProps, useRef, useState } from 'react'
 import { Meta, StoryObj } from '@storybook/react'
 
 import { Setup } from '../Setup'
@@ -47,7 +48,7 @@ const CustomCamera = ({ ...props }: ComponentProps<typeof ArcballControls>) => {
    * we will render our scene in a render target and use it as a map.
    */
   const fbo = useFBO(400, 400)
-  const virtualCamera = useRef<OrthographicCamera | PerspectiveCameraType>()
+  const virtualCamera = useRef<PerspectiveCameraType | null>(null)
   const [virtualScene] = useState(() => new Scene())
 
   useFrame(({ gl }) => {
@@ -73,7 +74,7 @@ const CustomCamera = ({ ...props }: ComponentProps<typeof ArcballControls>) => {
 
           <PerspectiveCamera name="FBO Camera" ref={virtualCamera} position={[0, 0, 5]} />
 
-          <ArcballControls camera={virtualCamera.current} {...props} />
+          <ArcballControls camera={virtualCamera.current ?? undefined} {...props} />
 
           <color attach="background" args={['hotpink']} />
         </>,
diff --git a/.storybook/stories/BBAnchor.stories.tsx b/.storybook/stories/BBAnchor.stories.tsx
index c2ceb5e01..6b4a95366 100644
--- a/.storybook/stories/BBAnchor.stories.tsx
+++ b/.storybook/stories/BBAnchor.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { ComponentProps } from 'react'
+import { ComponentProps, ElementRef } from 'react'
 import * as THREE from 'three'
 import { Meta, StoryObj } from '@storybook/react'
 
@@ -30,7 +30,7 @@ function BBAnchorScene({
   drawBoundingBox: boolean
   children?: React.ReactNode
 }) {
-  const ref = React.useRef(null)
+  const ref = React.useRef<ElementRef<typeof Icosahedron>>(null!)
 
   useHelper(drawBoundingBox && ref, BoxHelper, 'cyan')
 
diff --git a/.storybook/stories/CameraControls.stories.tsx b/.storybook/stories/CameraControls.stories.tsx
index c093e8c78..dcc4ef057 100644
--- a/.storybook/stories/CameraControls.stories.tsx
+++ b/.storybook/stories/CameraControls.stories.tsx
@@ -1,5 +1,6 @@
+import * as React from 'react'
 import { createPortal, useFrame } from '@react-three/fiber'
-import React, { ComponentProps, useRef, useState } from 'react'
+import { ComponentProps, ElementRef, useRef, useState } from 'react'
 import { Scene } from 'three'
 import { Meta, StoryObj } from '@storybook/react'
 
@@ -47,7 +48,7 @@ const CameraControlsScene2 = (props: ComponentProps<typeof CameraControls>) => {
    * we will render our scene in a render target and use it as a map.
    */
   const fbo = useFBO(400, 400)
-  const virtualCamera = useRef<CameraControls['camera']>()
+  const virtualCamera = useRef<ElementRef<typeof PerspectiveCamera>>(null)
   const [virtualScene] = useState(() => new Scene())
   const cameraControlRef = useRef<CameraControls>(null)
 
@@ -78,7 +79,7 @@ const CameraControlsScene2 = (props: ComponentProps<typeof CameraControls>) => {
           </Box>
 
           <PerspectiveCamera name="FBO Camera" ref={virtualCamera} position={[0, 0, 5]} />
-          <CameraControls ref={cameraControlRef} camera={virtualCamera.current} {...props} />
+          <CameraControls ref={cameraControlRef} camera={virtualCamera.current ?? undefined} {...props} />
 
           {/* @ts-ignore */}
           <color attach="background" args={['hotpink']} />
diff --git a/.storybook/stories/CurveModifier.stories.tsx b/.storybook/stories/CurveModifier.stories.tsx
index 78bc8ec4b..333c06c32 100644
--- a/.storybook/stories/CurveModifier.stories.tsx
+++ b/.storybook/stories/CurveModifier.stories.tsx
@@ -1,4 +1,5 @@
-import React, { ComponentProps } from 'react'
+import * as React from 'react'
+import { ComponentProps } from 'react'
 import { BufferGeometry, CatmullRomCurve3, LineBasicMaterial, LineLoop, Vector3 } from 'three'
 import { FontLoader, TextGeometry, TextGeometryParameters } from 'three-stdlib'
 import { extend, useFrame, useLoader } from '@react-three/fiber'
@@ -38,7 +39,7 @@ export default {
 type Story = StoryObj<typeof CurveModifier>
 
 function CurvedText(props: ComponentProps<typeof CurveModifier>) {
-  const curveRef = React.useRef<CurveModifierRef>()
+  const curveRef = React.useRef<CurveModifierRef>(null)
   const geomRef = React.useRef<TextGeometry>(null!)
   const font = useLoader(FontLoader, '/fonts/helvetiker_regular.typeface.json')
 
diff --git a/.storybook/stories/Float.stories.tsx b/.storybook/stories/Float.stories.tsx
index 0e5c54f77..b94eeec25 100644
--- a/.storybook/stories/Float.stories.tsx
+++ b/.storybook/stories/Float.stories.tsx
@@ -1,4 +1,5 @@
-import React, { ComponentProps, Suspense, useRef } from 'react'
+import * as React from 'react'
+import { ComponentProps, Suspense, useRef } from 'react'
 import * as THREE from 'three'
 
 import { Meta, StoryObj } from '@storybook/react'
diff --git a/.storybook/stories/Image.stories.tsx b/.storybook/stories/Image.stories.tsx
index 4704e3cc7..c92b6de9f 100644
--- a/.storybook/stories/Image.stories.tsx
+++ b/.storybook/stories/Image.stories.tsx
@@ -20,7 +20,7 @@ export default {
 
 type Story = StoryObj<typeof Image>
 
-function ImageScene({ url, ...props }: React.ComponentProps<typeof Image>) {
+function ImageScene({ url, texture, ...props }: React.ComponentProps<typeof Image>) {
   const texture1 = useTexture('/images/living-room-1.jpg')
   const texture2 = useTexture('/images/living-room-3.jpg')
 
diff --git a/.storybook/stories/MapControls.stories.tsx b/.storybook/stories/MapControls.stories.tsx
index 88ff5153b..6f067c9cf 100644
--- a/.storybook/stories/MapControls.stories.tsx
+++ b/.storybook/stories/MapControls.stories.tsx
@@ -38,7 +38,7 @@ function Svg() {
   const shapes = React.useMemo(
     () =>
       paths.flatMap((p) =>
-        p.toShapes(true).map((shape) => ({ shape, color: p.color, fillOpacity: p.userData.style.fillOpacity }))
+        p.toShapes(true).map((shape) => ({ shape, color: p.color, fillOpacity: p.userData?.style.fillOpacity }))
       ),
     [paths]
   )
diff --git a/.storybook/stories/OrbitControls.stories.tsx b/.storybook/stories/OrbitControls.stories.tsx
index 32158e07f..ac49fdb8c 100644
--- a/.storybook/stories/OrbitControls.stories.tsx
+++ b/.storybook/stories/OrbitControls.stories.tsx
@@ -1,5 +1,6 @@
+import * as React from 'react'
 import { createPortal, useFrame } from '@react-three/fiber'
-import React, { useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import { Scene } from 'three'
 import { Meta, StoryObj } from '@storybook/react'
 
diff --git a/.storybook/stories/Outlines.stories.tsx b/.storybook/stories/Outlines.stories.tsx
index 9d8ae9414..39fb005b6 100644
--- a/.storybook/stories/Outlines.stories.tsx
+++ b/.storybook/stories/Outlines.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import * as THREE from 'three'
 import { Meta, StoryObj } from '@storybook/react'
 
diff --git a/.storybook/stories/ScrollControls.stories.tsx b/.storybook/stories/ScrollControls.stories.tsx
index 7ac869869..5caccbcf2 100644
--- a/.storybook/stories/ScrollControls.stories.tsx
+++ b/.storybook/stories/ScrollControls.stories.tsx
@@ -27,7 +27,7 @@ function Suzanne(props: React.ComponentProps<'group'>) {
   useCursor(hovered)
 
   const visible = React.useRef(false)
-  const meshRef = useIntersect((isVisible) => (visible.current = isVisible))
+  const meshRef = useIntersect<THREE.Mesh>((isVisible) => (visible.current = isVisible))
 
   const { height } = useThree((state) => state.viewport)
   useFrame((_state, delta) => {
diff --git a/.storybook/stories/Texture.stories.tsx b/.storybook/stories/Texture.stories.tsx
index 62f6c4225..e06492bdd 100644
--- a/.storybook/stories/Texture.stories.tsx
+++ b/.storybook/stories/Texture.stories.tsx
@@ -51,7 +51,7 @@ function TextureScene2(props: React.ComponentProps<typeof Texture>) {
     <Texture {...props}>
       {(textures) => (
         <Icosahedron position={[0, 0, 0]}>
-          <meshStandardMaterial {...textures} metalness={1} />
+          <meshStandardMaterial {...(textures as any)} metalness={1} />
         </Icosahedron>
       )}
     </Texture>
diff --git a/.storybook/theme.ts b/.storybook/theme.ts
index b382e3c5c..5f5277f5f 100644
--- a/.storybook/theme.ts
+++ b/.storybook/theme.ts
@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming/create'
+import { create } from '@storybook/theming'
 import dreiLogo from './drei.jpeg'
 
 export default create({
diff --git a/package.json b/package.json
index b82cdf7d8..51cbe9aa1 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,8 @@
     "eslint:ci": "eslint .",
     "prettier": "prettier --check .",
     "prettier-fix": "prettier --write .",
-    "test": "yarn eslint:ci && yarn typecheck && yarn prettier && (cd test/e2e; ./e2e.sh)",
+    "lint": "yarn eslint:ci && yarn typecheck && yarn prettier",
+    "test": "yarn lint && (cd test/e2e; ./e2e.sh)",
     "typecheck": "tsc --noEmit --emitDeclarationOnly false --strict --jsx react",
     "typegen": "tsc --emitDeclarationOnly",
     "storybook": "cross-env NODE_OPTIONS=\"--openssl-legacy-provider\" storybook dev -p 6006",
diff --git a/src/core/AccumulativeShadows.tsx b/src/core/AccumulativeShadows.tsx
index 5d7786d37..f7c8ef15c 100644
--- a/src/core/AccumulativeShadows.tsx
+++ b/src/core/AccumulativeShadows.tsx
@@ -39,7 +39,7 @@ export type AccumulativeShadowsProps = {
   toneMapped?: boolean
 }
 
-interface AccumulativeContext {
+export interface AccumulativeShadowsContext {
   lights: Map<any, any>
   temporal: boolean
   frames: number
@@ -73,8 +73,8 @@ declare global {
   }
 }
 
-export const accumulativeContext = /* @__PURE__ */ React.createContext<AccumulativeContext>(
-  null as unknown as AccumulativeContext
+export const accumulativeContext = /* @__PURE__ */ React.createContext<AccumulativeShadowsContext>(
+  null as unknown as AccumulativeShadowsContext
 )
 
 const SoftShadowMaterial = /* @__PURE__ */ shaderMaterial(
@@ -104,10 +104,10 @@ const SoftShadowMaterial = /* @__PURE__ */ shaderMaterial(
    }`
 )
 
-export const AccumulativeShadows: ForwardRefComponent<
-  JSX.IntrinsicElements['group'] & AccumulativeShadowsProps,
-  AccumulativeContext
-> = /* @__PURE__ */ React.forwardRef(
+export const AccumulativeShadows = /* @__PURE__ */ React.forwardRef<
+  AccumulativeShadowsContext,
+  JSX.IntrinsicElements['group'] & AccumulativeShadowsProps
+>(
   (
     {
       children,
@@ -123,8 +123,8 @@ export const AccumulativeShadows: ForwardRefComponent<
       resolution = 1024,
       toneMapped = true,
       ...props
-    }: JSX.IntrinsicElements['group'] & AccumulativeShadowsProps,
-    forwardRef: React.ForwardedRef<AccumulativeContext>
+    },
+    forwardRef
   ) => {
     extend({ SoftShadowMaterial })
 
@@ -140,7 +140,7 @@ export const AccumulativeShadows: ForwardRefComponent<
       plm.configure(gPlane.current)
     }, [])
 
-    const api = React.useMemo<AccumulativeContext>(
+    const api = React.useMemo<AccumulativeShadowsContext>(
       () => ({
         lights: new Map(),
         temporal: !!temporal,
diff --git a/src/core/MeshDistortMaterial.tsx b/src/core/MeshDistortMaterial.tsx
index 950b6508e..916afd739 100644
--- a/src/core/MeshDistortMaterial.tsx
+++ b/src/core/MeshDistortMaterial.tsx
@@ -11,7 +11,7 @@ type DistortMaterialType = JSX.IntrinsicElements['meshPhysicalMaterial'] & {
   radius?: number
 }
 
-type Props = DistortMaterialType & {
+export type MeshDistortMaterialProps = DistortMaterialType & {
   speed?: number
   factor?: number
 }
@@ -28,7 +28,7 @@ interface Uniform<T> {
   value: T
 }
 
-class DistortMaterialImpl extends MeshPhysicalMaterial {
+export class MeshDistortMaterialImpl extends MeshPhysicalMaterial {
   _time: Uniform<number>
   _distort: Uniform<number>
   _radius: Uniform<number>
@@ -89,9 +89,9 @@ class DistortMaterialImpl extends MeshPhysicalMaterial {
   }
 }
 
-export const MeshDistortMaterial: ForwardRefComponent<Props, DistortMaterialImpl> = /* @__PURE__ */ React.forwardRef(
-  ({ speed = 1, ...props }: Props, ref) => {
-    const [material] = React.useState(() => new DistortMaterialImpl())
+export const MeshDistortMaterial = /* @__PURE__ */ React.forwardRef<MeshDistortMaterialImpl, MeshDistortMaterialProps>(
+  ({ speed = 1, ...props }, ref) => {
+    const [material] = React.useState(() => new MeshDistortMaterialImpl())
     useFrame((state) => material && (material.time = state.clock.getElapsedTime() * speed))
     return <primitive object={material} ref={ref} attach="material" {...props} />
   }
diff --git a/src/core/MeshWobbleMaterial.tsx b/src/core/MeshWobbleMaterial.tsx
index 09e17fde3..7c9f70704 100644
--- a/src/core/MeshWobbleMaterial.tsx
+++ b/src/core/MeshWobbleMaterial.tsx
@@ -9,7 +9,7 @@ type WobbleMaterialType = JSX.IntrinsicElements['meshStandardMaterial'] & {
   speed?: number
 }
 
-type Props = WobbleMaterialType & {
+export type MeshWobbleMaterialProps = WobbleMaterialType & {
   speed?: number
   factor?: number
 }
@@ -26,7 +26,7 @@ interface Uniform<T> {
   value: T
 }
 
-class WobbleMaterialImpl extends MeshStandardMaterial {
+export class MeshWobbleMaterialImpl extends MeshStandardMaterial {
   _time: Uniform<number>
   _factor: Uniform<number>
 
@@ -75,9 +75,9 @@ class WobbleMaterialImpl extends MeshStandardMaterial {
   }
 }
 
-export const MeshWobbleMaterial: ForwardRefComponent<Props, WobbleMaterialImpl> = /* @__PURE__ */ React.forwardRef(
-  ({ speed = 1, ...props }: Props, ref) => {
-    const [material] = React.useState(() => new WobbleMaterialImpl())
+export const MeshWobbleMaterial = /* @__PURE__ */ React.forwardRef<MeshWobbleMaterialImpl, MeshWobbleMaterialProps>(
+  ({ speed = 1, ...props }, ref) => {
+    const [material] = React.useState(() => new MeshWobbleMaterialImpl())
     useFrame((state) => material && (material.time = state.clock.getElapsedTime() * speed))
     return <primitive object={material} ref={ref} attach="material" {...props} />
   }
diff --git a/src/core/ShadowAlpha.tsx b/src/core/ShadowAlpha.tsx
index 1c8365d8d..409c57fd8 100644
--- a/src/core/ShadowAlpha.tsx
+++ b/src/core/ShadowAlpha.tsx
@@ -12,7 +12,7 @@ import { useFrame } from '@react-three/fiber'
 import * as React from 'react'
 import * as THREE from 'three'
 
-interface ShadowAlphaProps {
+export interface ShadowAlphaProps {
   opacity?: number
   alphaMap?: THREE.Texture | boolean
 }
diff --git a/src/core/Sparkles.tsx b/src/core/Sparkles.tsx
index 301d5fc8d..27039bae3 100644
--- a/src/core/Sparkles.tsx
+++ b/src/core/Sparkles.tsx
@@ -5,7 +5,7 @@ import { shaderMaterial } from './shaderMaterial'
 import { ForwardRefComponent } from '../helpers/ts-utils'
 import { version } from '../helpers/constants'
 
-interface Props {
+export interface SparklesProps {
   /** Number of particles (default: 100) */
   count?: number
   /** Speed of particles (default: 1) */
@@ -101,47 +101,48 @@ function usePropAsIsOrAsAttribute<T extends any>(
   }, [prop])
 }
 
-export const Sparkles: ForwardRefComponent<Props & PointsProps, THREE.Points> = /* @__PURE__ */ React.forwardRef<
-  THREE.Points,
-  Props & PointsProps
->(({ noise = 1, count = 100, speed = 1, opacity = 1, scale = 1, size, color, children, ...props }, forwardRef) => {
-  React.useMemo(() => extend({ SparklesImplMaterial }), [])
-  const ref = React.useRef<THREE.Points>(null!)
-  const dpr = useThree((state) => state.viewport.dpr)
+export const Sparkles: ForwardRefComponent<SparklesProps & PointsProps, THREE.Points> =
+  /* @__PURE__ */ React.forwardRef<THREE.Points, SparklesProps & PointsProps>(
+    ({ noise = 1, count = 100, speed = 1, opacity = 1, scale = 1, size, color, children, ...props }, forwardRef) => {
+      React.useMemo(() => extend({ SparklesImplMaterial }), [])
+      const ref = React.useRef<THREE.Points>(null!)
+      const dpr = useThree((state) => state.viewport.dpr)
 
-  const _scale = normalizeVector(scale)
-  const positions = React.useMemo(
-    () => Float32Array.from(Array.from({ length: count }, () => _scale.map(THREE.MathUtils.randFloatSpread)).flat()),
-    [count, ..._scale]
-  )
+      const _scale = normalizeVector(scale)
+      const positions = React.useMemo(
+        () =>
+          Float32Array.from(Array.from({ length: count }, () => _scale.map(THREE.MathUtils.randFloatSpread)).flat()),
+        [count, ..._scale]
+      )
 
-  const sizes = usePropAsIsOrAsAttribute<number>(count, size, Math.random)
-  const opacities = usePropAsIsOrAsAttribute<number>(count, opacity)
-  const speeds = usePropAsIsOrAsAttribute<number>(count, speed)
-  const noises = usePropAsIsOrAsAttribute<typeof noise>(count * 3, noise)
-  const colors = usePropAsIsOrAsAttribute<THREE.ColorRepresentation>(
-    color === undefined ? count * 3 : count,
-    !isFloat32Array(color) ? new THREE.Color(color) : color,
-    () => 1
-  )
+      const sizes = usePropAsIsOrAsAttribute<number>(count, size, Math.random)
+      const opacities = usePropAsIsOrAsAttribute<number>(count, opacity)
+      const speeds = usePropAsIsOrAsAttribute<number>(count, speed)
+      const noises = usePropAsIsOrAsAttribute<typeof noise>(count * 3, noise)
+      const colors = usePropAsIsOrAsAttribute<THREE.ColorRepresentation>(
+        color === undefined ? count * 3 : count,
+        !isFloat32Array(color) ? new THREE.Color(color) : color,
+        () => 1
+      )
 
-  useFrame((state) => {
-    if (ref.current && ref.current.material) (ref.current.material as any).time = state.clock.elapsedTime
-  })
+      useFrame((state) => {
+        if (ref.current && ref.current.material) (ref.current.material as any).time = state.clock.elapsedTime
+      })
 
-  React.useImperativeHandle(forwardRef, () => ref.current, [])
+      React.useImperativeHandle(forwardRef, () => ref.current, [])
 
-  return (
-    <points key={`particle-${count}-${JSON.stringify(scale)}`} {...props} ref={ref}>
-      <bufferGeometry>
-        <bufferAttribute attach="attributes-position" args={[positions, 3]} />
-        <bufferAttribute attach="attributes-size" args={[sizes, 1]} />
-        <bufferAttribute attach="attributes-opacity" args={[opacities, 1]} />
-        <bufferAttribute attach="attributes-speed" args={[speeds, 1]} />
-        <bufferAttribute attach="attributes-color" args={[colors, 3]} />
-        <bufferAttribute attach="attributes-noise" args={[noises, 3]} />
-      </bufferGeometry>
-      {children ? children : <sparklesImplMaterial transparent pixelRatio={dpr} depthWrite={false} />}
-    </points>
+      return (
+        <points key={`particle-${count}-${JSON.stringify(scale)}`} {...props} ref={ref}>
+          <bufferGeometry>
+            <bufferAttribute attach="attributes-position" args={[positions, 3]} />
+            <bufferAttribute attach="attributes-size" args={[sizes, 1]} />
+            <bufferAttribute attach="attributes-opacity" args={[opacities, 1]} />
+            <bufferAttribute attach="attributes-speed" args={[speeds, 1]} />
+            <bufferAttribute attach="attributes-color" args={[colors, 3]} />
+            <bufferAttribute attach="attributes-noise" args={[noises, 3]} />
+          </bufferGeometry>
+          {children ? children : <sparklesImplMaterial transparent pixelRatio={dpr} depthWrite={false} />}
+        </points>
+      )
+    }
   )
-})
diff --git a/src/core/Wireframe.tsx b/src/core/Wireframe.tsx
index 30e011064..ecbcd08a4 100644
--- a/src/core/Wireframe.tsx
+++ b/src/core/Wireframe.tsx
@@ -17,7 +17,7 @@ declare global {
   }
 }
 
-interface WireframeProps {
+export interface WireframeProps {
   geometry?: THREE.BufferGeometry | React.RefObject<THREE.BufferGeometry>
   simplify?: boolean
 }
diff --git a/src/web/Loader.tsx b/src/web/Loader.tsx
index 9f4bd158b..49fc72ca4 100644
--- a/src/web/Loader.tsx
+++ b/src/web/Loader.tsx
@@ -2,14 +2,14 @@ import * as React from 'react'
 import { useProgress } from '../core/Progress'
 import { CSSProperties } from 'react'
 
-interface LoaderOptions {
+export type LoaderProps = Partial<{
   containerStyles: CSSProperties
   innerStyles: CSSProperties
   barStyles: CSSProperties
   dataStyles: CSSProperties
   dataInterpolation: (p: number) => string
   initialState: (active: boolean) => boolean
-}
+}>
 
 const defaultDataInterpolation = (p: number) => `Loading ${p.toFixed(2)}%`
 
@@ -20,7 +20,7 @@ export function Loader({
   dataStyles,
   dataInterpolation = defaultDataInterpolation,
   initialState = (active: boolean) => active,
-}: Partial<LoaderOptions>) {
+}: LoaderProps) {
   const { active, progress } = useProgress()
   const progressRef = React.useRef(0)
   const rafRef = React.useRef(0)
diff --git a/tsconfig.json b/tsconfig.json
index dd968d842..a32fc63cb 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,8 +16,12 @@
     "outDir": "dist",
     "resolveJsonModule": true,
     "noImplicitAny": false,
-    "noImplicitThis": false
+    "noImplicitThis": false,
+    "baseUrl": ".",
+    "paths": {
+      "@react-three/drei": ["./src"]
+    }
   },
-  "include": ["./src"],
+  "include": ["src/**/*", ".storybook/**/*"],
   "exclude": ["./node_modules/**/*"]
 }