Reactjs – “Server Component Error” When Using "use client" in Next.js and Medusa.js Project

I’m working on an e-commerce project using Next.js and Medusa.js, and I’m encountering a "Server Component Error" when I add "use client" to a component. I need this directive for client-side interactivity, such as using useState and useEffect, but the error prevents proper client-side rendering.

// pages/product.js
"use client";

import { useState, useEffect } from 'react';

const Product = ({ product }) => {
    const [quantity, setQuantity] = useState(1);

    useEffect(() => {
        // Fetch additional product details, simulating an API call
        console.log('Fetching additional details...');
    }, []);

    const handleAddToCart = () => {
        // Add to cart logic
    };

    return (
        <div>
            <h1>{product.name}</h1>
            <p>{product.description}</p>
            <input
                type="number"
                value={quantity}
                onChange={(e) => setQuantity(e.target.value)}
            />
            <button onClick={handleAddToCart}>Add to Cart</button>
        </div>
    );
};

export default Product;

1. I added "use client"; at the top of the file to enable client-side rendering, but this results in a "Server Component Error."

2. Moving Product into pages/product.js directly seems to implicitly treat it as a server component.

3. I’ve reviewed the Next.js documentation on Server and Client Components, but I’m unsure how to structure this component to avoid the error.