Update the react-three-js example. (#22549)

- Removed deprecated drei dependency. 
- Added @react-three/drei and updated imports. 
- Upgraded other dependencies to latest versions.

examples/with-three-js/next.config.js

@@ -1,3 +1,3 @@
-const withTM = require('next-transpile-modules')(['drei', 'three'])
+const withTM = require('next-transpile-modules')(['@react-three/drei', 'three'])
 
 module.exports = withTM()

examples/with-three-js/package.json

@@ -8,15 +8,15 @@
     "start": "next start"
   },
   "dependencies": {
-    "drei": "2.2.21",
-    "next": "10.0.5",
+    "@react-three/drei": "3.8.6",
+    "next": "10.0.7",
     "react": "17.0.1",
     "react-dom": "17.0.1",
-    "react-three-fiber": "5.3.11",
-    "three": "0.125.0"
+    "react-three-fiber": "5.3.19",
+    "three": "0.126.0"
   },
   "devDependencies": {
-    "next-transpile-modules": "6.0.0"
+    "next-transpile-modules": "6.3.0"
   },
   "license": "MIT"
 }

examples/with-three-js/pages/birds.js

@@ -1,7 +1,7 @@
 import dynamic from 'next/dynamic'
 import { Suspense } from 'react'
 import { Canvas } from 'react-three-fiber'
-import { OrbitControls } from 'drei'
+import { OrbitControls } from '@react-three/drei'
 
 const Bird = dynamic(() => import('../components/Bird'), { ssr: false })
 

examples/with-three-js/pages/boxes.js

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react'
 import { Canvas, useFrame } from 'react-three-fiber'
-import { OrbitControls, Box } from 'drei'
+import { OrbitControls, Box } from '@react-three/drei'
 
 const MyBox = (props) => {
   const mesh = useRef()