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

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 react@18.3.1 (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

This worked for me

import { ReactLenis } from '@studio-freight/react-lenis'
import type Lenis from '@studio-freight/lenis'
import { cancelFrame, frame } from 'motion/react'


type LenisRef = {
  lenis: Lenis | undefined
}

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

  useEffect(() => {
    function update(data: { timestamp: number }) {
      lenisRef.current?.lenis?.raf(data.timestamp)
    }
    frame.update(update, true)

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

  return (
    <ReactLenis ref={lenisRef} options={{ duration: 1 }} root> ...