[Solved]-Loop through Array of object with the same data on some object and get it displayed once-Reactjs

Like @Bravo says:

const products = [
  {
    id: 1,
    drinkName: "Chivita",
    category: "Juice",
    description: "The best drink ever",
  },
  {
    id: 1,
    drinkName: "5 Alive",
    category: "Juice",
    description: "The best drink ever",
  },
  {
    id: 3,
    drinkName: "Cocacola",
    category: "Others",
    description: "The best drink ever",
  },
];

const MyComponent = () => {
  const items = products.reduce((prev, current) => {
    if (!current.category in prev) {
      prev[current.category] = [];
    }
    prev[current.category].push(current.drinkName);
    return prev;
  }, {});

  Object.keys(items).map((key) => {
    return (
      <AccordionItem key={key}>
        <h2>
          <AccordionButton fontSize={"sm"} fontWeight={"medium"}>
            <Box flex="1" textAlign="left">
              {key}
            </Box>
            <Box flex="1" textAlign="left">
              {items[key].map((drinkName) => {
                return <p key={drinkName}>{drinkName}</p>;
              })}
            </Box>
            <AccordionIcon />
          </AccordionButton>
        </h2>
      </AccordionItem>
    );
  });
};