Why don’t my platform and packageType states update correctly?

import SelectPackages from "../components/structure/landing_page/SelectPackages.jsx";
import LandingHeader from "../components/structure/landing_page/header/LandingHeader.jsx";
import HowItWorks from "../components/structure/landing_page/HowItWorks.jsx";
import FAQ from "../components/structure/landing_page/FAQ.jsx";
import LandingReviews from "../components/structure/landing_page/LandingReviews.jsx";
import LandingButtons from "../components/structure/landing_page/LandingButtons.jsx";
import Features from "../components/structure/landing_page/Features.jsx";
import {useState} from "react";

export default function Index() {
    const [platform, setPlatform] = useState("instagram")
    const [packageType, setPackageType] = useState("discussions")
    return (
        <>
            <LandingHeader/>
            <LandingButtons onPackageSelected={(newPlatform, newPackageType) => {
                console.log("Selected platform:", newPlatform, "Selected package type:", newPackageType);
                setPlatform(newPlatform);
                setPackageType(newPackageType);
            }}/>
            <HowItWorks/>
            <Features/>
            <SelectPackages initialPlatform={platform} initialPackageType={packageType}/>
            <FAQ/>
            <LandingReviews/>
        </>

    );
}

import twocheckout1 from "../../../assets/img/landing/twocheckout1.png";

const buttons = [
    { text: "Instagram discussions", platform: "instagram", packageType: "discussions" },
    { text: "Instagram comments", platform: "instagram", packageType: "comments" },
    { text: "Instagram discussions + comments", platform: "instagram", packageType: "discussions+comments" },
    { text: "TikTok discussions", platform: "tiktok", packageType: "discussions" },
    { text: "TikTok comments", platform: "tiktok", packageType: "comments" },
    { text: "TikTok discussions + comments", platform: "tiktok", packageType: "discussions+comments" },
];

export default function LandingButtons({onPackageSelected}) {
    return (
        <div id="landing-buttons" className="text-center space-y-12 mb-16">
          

            <div className="grid grid-cols-3 gap-4 w-3/5 mx-auto">
                {buttons.map((button, index) => (
                    <button
                        key={index}
                        className="text-white font-semibold py-4 px-5 rounded-2xl text-center no-underline
                                    bg-gradient-to-tr from-yellow-500 to-pink-500 via-pink-500"
                        onClick={() => onPackageSelected(button.platform, button.packageType)}
                    >
                        {button.text}
                    </button>
                ))}
            </div>
            <img src={twocheckout1} className="mx-auto"/>
        </div>

    );
}

import {useEffect, useState} from "react";
import DiscussionsPackages from "../../packages/DiscussionsPackages.jsx";
import CommentsPackages from "../../packages/CommentsPackages.jsx";
import DiscussionsCommentsPackages from "../../packages/DiscussionsCommentsPackages.jsx";
import {useNavigate} from "react-router";
import {getPrices} from "../../../services/infoRequests.js";

export default function SelectPackages({initialPlatform, initialPackageType}) {
    const navigate = useNavigate();
    const [platform, setPlatform] = useState(initialPlatform);
    const [packageType, setPackageType] = useState(initialPackageType);
    const [selectedPackage, setSelectedPackage] = useState(null);
    const [commentsPackages, setCommentsPackages] = useState({});
    const [discussionsPrices, setDiscussionsPrices] = useState({});
    const [slidersLimits, setSlidersLimits] = useState({}); 
    console.log("1 platform:", platform); //shows initial "instagram" value
    console.log("1 package type:", packageType);
    console.log("2 platform:", initialPlatform); //shows updated "tiktok" value
    console.log("2 package type:", initialPackageType);
    useEffect(() => {
        getPrices().then((res) => {
            setCommentsPackages(res.data.commentsPackages);
            setDiscussionsPrices(res.data.discussionsPrices);
            setSlidersLimits(res.data.discussionsSlidersLimits);
        });
    }, [platform, packageType]);


    function handlePackageSelected(_selectedPackage) {
        setSelectedPackage(_selectedPackage);
    }


    return (
        <div id="packages" className="mx-32 my-20 text-center">
            <h1>Packages</h1>
            <div id="platformButtons" className="space-x-10 my-5">
                <button
                    className={platform === "instagram" ? "bg-blue-500" : ""}
                    onClick={() => setPlatform("instagram")}>
                    Instagram
                </button>
                <button
                    className={platform === "tiktok" ? "bg-blue-500" : ""}
                    onClick={() => setPlatform("tiktok")}>
                    TikTok
                </button>
            </div>
            <div id="typeButtons" className="space-x-10 my-10">
                <button
                    className={packageType === "discussions" ? "bg-blue-500" : ""}
                    onClick={() => setPackageType("discussions")}>
                    Discussions
                </button>
                <button
                    className={packageType === "comments" ? "bg-blue-500" : ""}
                    onClick={() => setPackageType("comments")}>
                    Comments
                </button>
                <button
                    className={packageType === "discussions+comments" ? "bg-blue-500" : ""}
                    onClick={() => setPackageType("discussions+comments")}>
                    Discussions + comments
                </button>
            </div>
            <div id="packages-options" className="text-left mb-10">
                {
                    packageType === "discussions" ?
                        <DiscussionsPackages
                            prices={discussionsPrices}
                            slidersLimits={slidersLimits}
                            onPackageSelected={handlePackageSelected}
                        /> :
                        packageType === "comments" ?
                            <CommentsPackages
                                packages={commentsPackages}
                                onPackageSelected={handlePackageSelected}
                            /> :
                            <DiscussionsCommentsPackages
                                discussionsPrices={discussionsPrices}
                                slidersLimits={slidersLimits}
                                commentsPackages={commentsPackages}
                                onPackageSelected={handlePackageSelected}
                            />
                }
            </div>
        
        </div>
    )
}