PWA Studio Create Review Mutation failed

I have this mutation to create the product review which is working fine but not able to integrate into the form does anyone how I can fix that ?

mutation {
  createProductReview(
    input: {
      sku: "Samsung S21 Ultra",
      nickname: "Test",
      summary: "Great looking phone",
      text: "This phone looks and feels great.",
      ratings: [
        {
          id: "NA==",
          value_id: "MTk="
        }, {
          id: "MQ==",
          value_id: "NA=="
        }, {
          id: "Mg==",
          value_id: "OA=="
        }
      ]
    }
) {
    review {
      nickname
      summary
      text
    }
  }
}

here is my component code:

import React, { useState } from 'react';
import { useMutation, gql } from '@apollo/client';

const CREATE_PRODUCT_REVIEW = gql`
    mutation CreateProductReview($input: ProductReviewInput!) {
        createProductReview(input: $input) {
            review {
                nickname
                summary
                text
            }
        }
    }
`;

const ProductReview = ({ productSku }) => {
    const [sku, setSku] = useState('');
    const [nickname, setNickname] = useState('');
    const [summary, setSummary] = useState('');
    const [text, setText] = useState('');

    const [createProductReview, { data }] = useMutation(CREATE_PRODUCT_REVIEW);

    const handleSubmit = async (e) => {
        e.preventDefault();

        const input = {
            sku,
            nickname,
            summary,
            text,
            ratings: [
                { id: "NA==", value_id: "MTk=" },
                { id: "MQ==", value_id: "NA==" },
                { id: "Mg==", value_id: "OA==" },
            ],
        };

        try {
            const result = await createProductReview({ variables: { input } });
            console.log('Review created:', result.data.createProductReview.review);
            setNickname('');
            setSummary('');
            setText('');
        } catch (error) {
            console.error('Error creating review:', error);
        }
    };

    return (
        <div>
            <h2>Create Product Review</h2>
            <form onSubmit={handleSubmit}>
                {/* Input fields for sku, nickname, summary, text */}
                <input type="hidden" placeholder="SKU" value={productSku} onChange={(e) => setSku(productSku)} />
                <input type="text" placeholder="Nickname" value={nickname} onChange={(e) => setNickname(e.target.value)} />
                <input type="text" placeholder="Summary" value={summary} onChange={(e) => setSummary(e.target.value)} />
                <textarea placeholder="Text" value={text} onChange={(e) => setText(e.target.value)} />

                {/* Submit button */}
                <button type="submit">Submit Review</button>
            </form>
        </div>
    );
};

export default ProductReview;

And I’m calling this component in another component where I’m adding sku in the props

<ProductReview productSku={productDetails.sku} />

How I can submit the form without error I’m getting this error on submitting the form

index.js:31     POST https://pwa-studio.local:8103/graphql 500 (Internal Server Error)

errorLink.js:18 [Network error]: ServerError: Response not successful: Received status code 500
productReview.js:46 Error creating review: Error: Response not successful: Received status code 500
    at new ApolloError (index.js:29:1)
    at Object.error (QueryManager.js:137:74)
    at notifySubscription (module.js:137:1)
    at onNotify (module.js:176:1)
    at SubscriptionObserver.error (module.js:229:1)
    at Object.eval [as error] (asyncMap.js:32:40)
    at notifySubscription (module.js:137:1)
    at onNotify (module.js:176:1)
    at SubscriptionObserver.error (module.js:229:1)
    at eval (iteration.js:4:49)