Fix TypeScript Error in 3D Portfolio

.gitignore

@@ -24,6 +24,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+dev_server.log
 
 # local env files
 .env*.local
@@ -34,3 +35,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# screenshots
+portfolio-3d-view.png

dev_server.log

@@ -2,5 +2,3 @@
 > portfolio@0.1.0 dev
 > next dev
 
-   ▲ Next.js 14.0.4
-   - Local:        http://localhost:3000

src/app/_components/Projects/page.tsx

@@ -6,9 +6,10 @@ import React, {
     useState,
     Suspense,
     useEffect,
+    useMemo,
   } from "react";
   import { Canvas, useFrame, useThree } from "@react-three/fiber";
-  import { OrbitControls, Preload, Image as ImageImpl } from "@react-three/drei";
+  import { OrbitControls, Preload, Image as ImageImpl, type ImageProps } from "@react-three/drei";
   import { a as aThree } from "@react-spring/three";
   import * as THREE from "three";
 
@@ -47,12 +48,13 @@ import React, {
 
   const damp = THREE.MathUtils.damp;
 
-  function Image({ c = new THREE.Color(), ...props }) {
-    const ref = useRef(null!);
+  function Image({ ...props }: ImageProps) {
+    const c = useMemo(() => new THREE.Color(), []);
+    const ref = useRef<THREE.Mesh>(null!);
     const [hovered, hover] = useState(false);
 
     useFrame((state, delta) => {
-      ref.current.material.color.lerp(
+      (ref.current.material as THREE.MeshBasicMaterial).color.lerp(
         c.set(hovered ? "white" : "#ccc"),
         hovered ? 0.4 : 0.05
       );
@@ -78,9 +80,8 @@ import React, {
           <Image
             key={i}
             url={img}
-            alt={projects[i].title}
             position={positions[i]}
-            scale={[2, 2, 2]}
+            scale={2}
             onClick={() => onImageClick(i)}
           />
         ))}

verify.spec.ts

@@ -2,6 +2,7 @@
 import { test, expect } from '@playwright/test';
 
 test('homepage has a canvas for the 3D portfolio', async ({ page }) => {
+  test.setTimeout(60000); // 60 seconds
   const FgRed = "\x1b[31m"
   page.on('console', msg => {
     if (msg.type() === 'error')