fix ExtraComponent appearing

src/pages/product/page.tsx

@@ -8,12 +8,12 @@ import { default_image } from "utils/constants";
 import { Space } from "antd";
 import ArabicPrice from "components/ArabicPrice";
 import useBreakPoint from "hooks/useBreakPoint";
+import ExtraGroupsContainer from "pages/product/components/ExtraGroupsContainer.tsx";
 import { useCallback, useMemo, useState } from "react";
 import { colors } from "ThemeConstants";
 import { Extra, Product } from "utils/types/appTypes";
 import BackButton from "../menu/components/BackButton";
 import ExtraComponent from "./components/Extra";
-import ExtraGroupsContainer from "pages/product/components/ExtraGroupsContainer.tsx";
 import ProductFooter from "./components/ProductFooter";
 import Variants from "./components/Variants";
 import styles from "./product.module.css";
@@ -300,7 +300,7 @@ export default function ProductDetailPage({
                   />
                 )}
 
-                {getExtras().length && product.theExtrasGroups.length === 0 && (
+                {getExtras()?.length > 0 && (
                   <ExtraComponent
                     extrasList={getExtras()}
                     selectedExtras={selectedExtras}