As u see, i have a catalog icon in header. when i click that icon, <HeroCategory , , should be hidden and should be visible.

"use client"
import React, { useState } from "react";
import "../../../styles/global.scss";
import style from "./header.module.scss";
import { useTranslations } from "next-intl";
import Image from "next/image";
import nanoLogo from "@/app/assets/images/header/nanoLogo.svg";
import userIcon from "@/app/assets/images/header/user.svg";
import catalogIcon from "@/app/assets/images/header/catalog.svg";
import searchIcon from "@/app/assets/images/header/search.svg";
import heartIcon from "@/app/assets/images/header/heart.svg";
import shoppingIcon from "@/app/assets/images/header/shopping.svg";
import Input from "../input/Input";
import Link from "next/link";
import LocalSwitcher from "@/app/components/local-switcher/LocalSwitcher";
import HeroHome from "@/app/components/home-components/hero-home/HeroHome";

function Header() {
  const [showSubCategory, setShowSubCategory] = useState(false);
  const translate = useTranslations("Header");

  const handleCatalogClick = () => {
    setShowSubCategory((prevState) => !prevState);
  };

  return (
    <>
      <header className={style.header}>
      .....
        <div className={style.headerBottom}>
          <div className={style.catalogAndForm}>
            <div className={style.catalog} onClick={handleCatalogClick}>
              <Image className={style.catalogIcon} src={catalogIcon} alt="img" />
              <div className={style.headerLine}></div>
              <p className={style.catalogTitle}>{translate("catalog")}</p>
            </div>
          ....
        </div>
      </header>
      <HeroHome showSubCategory={showSubCategory} />
    </>
  );
}

export default Header;

type here"use client"
import React from "react";
import style from "./heroHome.module.scss";
import HeroCategory from "./heroHome-category/HeroCategory";
import HeroSlider from "./heroHome-slider/HeroSlider";
import HeroOfferOfDay from "./heroHome-OfferOfDay/HeroOfferOfDay";
import HeroSubCategory from "./heroHome-subCategory/HeroSubCategory";

function HeroHome({ showSubCategory }) {
  return (
    <div className={style.heroHome}>
      {!showSubCategory ? (
        <>
          <HeroCategory />
          <HeroSlider />
          <HeroOfferOfDay />
        </>
      ) : (
        <HeroSubCategory />
      )}
    </div>
  );
}

export default HeroHome;

When I click the catalog icon, is visible, but <HeroCategory , , don’t disappear. I see 4 of them. But when I click the icon, I should see instead of <HeroCategory , , .