我希望你有一个伟大的日子！我有个问题...我目前正在学习next.js 13，所以我想用它做一个个人项目是个好主意。目前，我正在做一个电子商务与Sanity.io作为一个CMS。我得到的问题是，即时通讯获取数据与异步函数，但我也想使用“使用状态”钩从React做一个不错的产品图片查看器！我得到的问题是，我不能使用一个异步函数内部的钩子！所以请如果有人得到一个解决方案，我会非常高兴，因为我真的是新的next.js 13这里是我的代码和我想做的

"use client"
import { Product } from '@/component';
import { getProduct, getProducts } from '@/sanity/sanity-utils';
import React, { useState } from 'react';
import { AiOutlineMinus,AiOutlinePlus,AiFillStar,AiOutlineStar} from 'react-icons/ai';

export default async function ProductDetails({ params }) {
  const slug = params.product;
  const product = await getProduct(slug);
  console.log("product",product)

  return (
    <div>
      <div className='product-detail-container'>
        <div>
        <div className='image-container'>
            <img src={product.image[0]} alt="product-image"
            className='product-detail-image'
            />
          </div>
            <div className='small-images-container'>
              {product.image.map((item, i) => (
               <img
                  src={item}
                  alt={`product-image-${i}`}
                  key={i}
                  />
                 ))}
            </div>
        </div>

我真正想做的是一个使用状态来访问图像数组，这样当我单击它时它就会显示每个图像

const [index, setIndex] = useState(); 
 <div className='small-images-container'>
              {product.image.map((item, i) => (
               <img
                  src={item}
                  alt={`product-image-${i}`}
                  key={i}
                  onMouseEnter={()=> setIndex(i)}
                  />
                 ))}
            </div>

谢谢你，我希望我的问题是可以理解的
我真的不知道该怎么办，我应该把数据从理智不同？