Как вывести компонент React несколько раз учитывая количество count в объекте?

const App = () => {
  const [ingredients, setIngredients] = useState([
    {name: 'Meat', count: 0, id: nanoid()},
    {name: 'Cheese', count: 0, id: nanoid()},
    {name: 'Salad', count: 0, id: nanoid()},
    {name: 'Beacon', count: 0, id: nanoid()},
  ]);

  const increaseIngredients = (id: string) => {
    setIngredients((prevState) =>
      prevState.map((ingredient) =>
        ingredient.id === id
          ? {...ingredient, count: ingredient.count + 1}
          : ingredient
      )
    );
  };

  const deleteIngredients = (id: string) => {
    setIngredients((prevState) =>
      prevState.map((ingredient) =>
        ingredient.id === id && ingredient.count > 0
          ? {...ingredient, count: ingredient.count - 1}
          : ingredient
      )
    );
  };

  const ingredientList = ingredients.map((ingredient) => {
    return (
      <Ingredient key={ingredient.id} img={`./${ingredient.name}.png`} name={ingredient.name} count={ingredient.count}
                  increaseIngredient={() => increaseIngredients(ingredient.id)}
                  deleteIngredient={() => deleteIngredients(ingredient.id)}/>
    );
  });

  const burgerList = ingredients.map((ingredient => {
    if (ingredient.name === 'Meat') return <Meat/>;
    if (ingredient.name === 'Cheese') return <Cheese/>;
    if (ingredient.name === 'Salad') return <Salad/>;
    if (ingredient.name === 'Beacon') return <Beacon/>;
  }));

  return (
    <>
      <Container name={'Ingredients'}>
        {ingredientList}
      </Container>

      <Container name={'Burger'}>
        <Burger>
          {burgerList}
        </Burger>
      </Container>
    </>
  );
};

export default App;