Error: R3F: P is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively

three version: latest
@react-three/fiber version: latest
@react-three/drei version: latest
node version: 20.16.0
npm (or yarn) version: 1.22.22

Problem description:

Hi I'm having a problem with the use of text every time I try to put text I receive this error : Error: R3F: P is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively

Relevant code:

'use client';

import * as THREE from 'three';
import { Canvas, useLoader } from '@react-three/fiber';
import { ContactShadows, Environment, Text3D } from '@react-three/drei';
import { Suspense } from 'react';
import { useTranslations } from 'next-intl';
import { cn } from '@/lib/utils';
import localFont from 'next/font/local';

const myFont = localFont({ src: '../fonts/linotype-didot-roman.ttf', display: 'swap' });

<Canvas
      shadows
      style={{ height: '100vh', width: '100vw' }}
      camera={{ position: [0, 5, 13], fov: 25 }}
    >
      <Suspense fallback={<SuspenseFallback />}>
        <ambientLight intensity={2} />
        <directionalLight position={[2, 1, 1]} />

        <group name="logo">
          <Text3D font={'fonts/linotype-didot-roman.ttf'}>QAP</Text3D>
          <mesh>
            <boxGeometry args={[1, 1, 1]} />
          </mesh>
        </group>
      </Suspense>
    </Canvas>

pmndrs / drei

Error: R3F: P is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively #2060

Problem description:

Relevant code:

Suggested solution: