So basically this is my component. i don’t know why the moment i reload the page it’ll always give me infinite loop issue. it’ll throw the error the moment i go the page. i can’t even fill in anything inside the form field. kindly help me with this.

'use client';
import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import Accordion from '@/components/common/accordion';
import { ProductDetails } from '@/components/product/productDetails';
import { ProductBenefit } from '@/components/product/productBenefit';
import { ProductQuestion } from '@/components/product/productQuestion';
import { PORDUCT_BENEFIT_DATA, PORDUCT_DETAILS_DATA, PORDUCT_QUESTION_DATA, ProductBenefitData, ProductDetailsData, ProductQuestionData } from '@/model/product.type';
import CommonButton from '../common/form-element/commonButton';
import { FormButtonType } from '@/model/form.type';

interface ProductFormProps {
    productCode: string;
    onBack: () => void;
}

const ProductForm: React.FC<ProductFormProps> = ({ productCode, onBack }) => {
    const { t } = useTranslation();
    const [productDetailsData, setProductDetailsData] = useState<ProductDetailsData>(PORDUCT_DETAILS_DATA);
    const [productBenefitData, setProductBenefitData] = useState<ProductBenefitData>(PORDUCT_BENEFIT_DATA);
    const [productQuestionData, setProductQuestionData] = useState<ProductQuestionData>(PORDUCT_QUESTION_DATA);
    const [isValid, setIsValid] = useState(false);

    const handleProductDetailsChange = (formData: ProductDetailsData) => {
        setProductDetailsData(formData);
    }; 
    
    const handleProductBenefitChange = (formData: ProductBenefitData) => {
        setProductBenefitData(formData);
    };

    const handleProductQuestionChange = (formData: ProductQuestionData) => {
        setProductQuestionData(formData);
    };

    const handleValidationChange = (isValid: boolean) => {
        setIsValid(isValid);
    };

    const handleSubmit = () => {
        const mergedData = {
        ...productDetailsData,
        ...productQuestionData,
        ...productBenefitData,
        };

        const existingProductsJSON = localStorage.getItem('ProductList');
        const existingProducts = existingProductsJSON ? JSON.parse(existingProductsJSON) : [];
        const updatedProducts = [...existingProducts, mergedData];
        localStorage.setItem('ProductList', JSON.stringify(updatedProducts));
        onBack();
    };

    return (
        <div className="container w-full">
             <div className="bg-white">
                <div className="h-full container px-0 mx-auto mb-4">
                    <div className="w-full">
                        <Accordion title={t('Product.section.details')} isOpen={true}>
                            <ProductDetails
                                onChange={handleProductDetailsChange}
                                productFormData={productDetailsData}
                                onValidationChange={handleValidationChange}
                                isEdit={false}
                            />
                        </Accordion>
                        <Accordion title={t('Product.section.question')}>
                            <ProductQuestion
                                onChange={handleProductQuestionChange}
                                productQuestionData={productQuestionData}
                                onValidationChange={handleValidationChange}
                                isEdit={false}
                            />
                        </Accordion>
                        <Accordion title={t('Product.section.benefit')}>
                            <ProductBenefit
                                onChange={handleProductBenefitChange}
                                productBenefitData={productBenefitData}
                                onValidationChange={handleValidationChange}
                                isEdit={false}
                            />
                        </Accordion>
                        <div className="flex justify-end mt-4">
                            <div className="w-40">
                                <CommonButton
                                    buttonType={FormButtonType.PRIMARY}
                                    buttonText={t('Common.submit')}
                                    isSubmit={false}
                                    onChange={handleSubmit}
                                    isDisabled={!isValid}
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ProductForm;

Im expecting i wont get the infinite loop issue when i go the form page. but now it keep giving me that.