linea problematica :c

app/tablero.js

@@ -1,19 +1,21 @@
+'use client'
+
 import { useState } from "react"
 import Cuadrado from "./cuadros"
 
 const Tablero =()=>{
     const [cuadros, setCuadros] = useState(Array(9).fill(""));
-    const [turno, setTuerno]=usiState('X')
+    const [turno, setTurno]=useState('X')
     
     const pintaFigura=(indexItem)=>{
-        
-        const misCuadros= cuadros.slice()
-        setCuadros(misCuadros)
-        if(turno==='X'){ // Verifica los turnos
-            setTuerno('O')
-        }
-        else{
-            setTuerno('X')
+        const misCuaadros=cuadros.slice()
+        misCuaadros.splice(indexItem,1,turno)
+        setCuadros(misCuaadros) // esta linea me da problemas
+
+        if(turno==='X'){
+            setTurno('O')
+        }else{
+            setTurno('X')
         }
     }
     return(