Correct Way to Integrate Motion and Lenis with React 18.3.1 in Vite?

[DavidAyoa]

Please i came up with this but i'm not exactly sure if this is the way to use the new 'motion' library with lenis and typescript in [email protected] (vite as builder). Is this correct?

This here is my App.tsx:

import { useEffect, useRef } from 'react'
import { LenisRef, ReactLenis } from 'lenis/react'
import { cancelFrame, frame } from "motion/react"
import Preloader from './components/Preloader'

interface FrameData {
  delta: number;
  timestamp: number;
  isProcessing: boolean;
}

function App() {
  const lenisRef = useRef<LenisRef | null>(null);

  useEffect(() => {
    function update(data: FrameData) {
      const time = data.timestamp
      lenisRef.current?.lenis?.raf(time)
    }

    frame.update(update, true)
    console.log(lenisRef)

    return () => cancelFrame(update)
  }, [])

  return (
    <ReactLenis options={{ autoRaf: false }} ref={lenisRef}>
      <Preloader />
    </ReactLenis>
  )
}

export default App