React : Maximum update depth exceeded – Shopify

Still with my react project, now I’m learning the hooks, perhaps I have an issue with the ‘infinite loop’ (Maximum update depth exceeded) and I can’t figure out how to handle this. I have redux to handle the states. I used useEffect, because when I clicked on a div, it was showing, or did what I wanted, always one step late

function OffersWhatTypeOfWebsiteComponent(props) {

    const dispatch = useDispatch()

    const [active, setActive] = useState(1)
    const [typeWebSite, setTypeWebSite] = useState('withCMS')

    const updateTypeWebSite = () => {
        dispatch({
            type: "TYPE_WEBSITE",
            payload: typeWebSite
        })
    }

    useEffect(() => {
        updateTypeWebSite();
      }, [updateTypeWebSite()]);

    const renderElements = (props) => {
        switch (active) {
            case 1 :
                return (
                    <>
                        <OffersChooseYourPackageCMSComponent
                        />
                    </>
                );
                break
            case 2 :
                return (
                    <>
                        <OffersChooseYourPackageLikeAProComponent/>
                    </>
                )
            default:
                return 'error'
        }
    }

    return (
        <div>
            <OffersTitleCardComponent
                titleNumber='2'
                titleSection='What type of Website'
            />
            <div className='chooseYourProject'>
                <OffersCardsWithCheckComponent
                    titleCard='With CMS'
                    subtitleCard='xxxx'
                    active={active === 1 ? 'listing-active' : 'listing'}
                    onClick={() => {
                        setActive(1);
                        setTypeWebSite('withCMS');
                        updateTypeWebSite()
                    }}
                />
                <OffersCardsWithCheckComponent
                    titleCard='Like a pro'
                    subtitleCard='xxx'
                    active={active === 2 ? 'listing-active' : 'listing'}
                    onClick={() => {
                        setActive(2);
                        setTypeWebSite('like a pro');
                        updateTypeWebSite()

                    }}
                />
            </div>
            {
                renderElements({})
            }
        </div>

    );
}

export default OffersWhatTypeOfWebsiteComponent;

This is the sub-component :

function OffersChooseYourPackageCMSComponent(props) {

    const dispatch = useDispatch()

    const [active, setActive] = useState(1)
    const [packageWebSite, setPackageWebSite] = useState('Shopify')
    const [pricePackageWebSite, setPricePackageWebSite] = useState(300)

    const updatePackageWebSite = () => {
        dispatch({
            type: "PACKAGE_WEBSITE",
            payload: {packageWebSite, pricePackageWebSite}
        })
    }

    useEffect(() => {
        updatePackageWebSite();
    }, [updatePackageWebSite()]);


    const renderElements = () => {
        switch (active) {
            case 1 :
                return (
                    <>
                        <OffersNumbersOfProductsComponent/>
                    </>
                );
                break
            case 2 :
                return (
                    <>
                        <OffersNumbersOfPagesComponent/>
                        <OffersWoocommerceComponent/>
                    </>
                );
                break
            default :
                return 'error'
        }
    }


    return (
        <div>
            <OffersTitleCardComponent
                titleNumber='3'
                titleSection='Choose your package'
            />
            <div className="shopify">
                <OffersCardsWithCheckComponent
                    onClick={() => {
                        setActive(1);
                        setPackageWebSite('Shopify');
                        setPricePackageWebSite(300);
                        updatePackageWebSite()
                    }}
                    active={active === 1 ? "listing-active" : "listing"}
                    titleCard='Shopify'
                    subtitleCard='xxx'
                    pricePackage='$54349'
                    detailPrice='(1 landing page + up to 5 products)'
                />
                <OffersCardsWithCheckComponent
                    onClick={() => {
                        setActive(2);
                        setPackageWebSite('WordPress');
                        setPricePackageWebSite(900);
                        updatePackageWebSite()
                    }}
                    active={active === 2 ? "listing-active" : "listing"}
                    titleCard='WordPress'
                    subtitleCard='xxxx'
                    pricePackage='$23349'
                    detailPrice='(1 landing page)'
                />
            </div>
            {renderElements()}
        </div>
    );
}

export default OffersChooseYourPackageCMSComponent;

Don’t hesitate to tell me some good practices too, on what I should arrange also if needed.

Thanks for your help