Отображение корзины товаров в React с фильтром по фруктам и подсчётом итогов

1. С помощью компонента <Cart /> вывести список товаров в виде корзин.
2. Реализовать реакцию на переключатель (checkbox), который будет ограничивать вывод только фруктовыми позициями. Информация о фруктах хранится в массиве PRODUCTS.
3. Вычислить общую стоимость и суммарное количество всех товаров, учитывая состояние чекбокса.

 import "/styles.css";

export default function App() {
    return [
    <div className="wrapper">
    <div>
    <input type="checkbox" id="isFruit" />
    Показывать только фрукты
    </div>
    <div>
    Общее количество: <span></span>
    </div>
    <div>
    Общая цена: <span></span>
    </div>
    <div>Список продуктов:</div>
    <div className="cart-wrapper">
    <Cart name="Apple" price=(10) count=(5) />
    </div>
    </div>
]
}

interface IProps {
    name: string;
    price: number;
    count: number;
}

export const Cart = {{ name, price, count }}; IProps) => {
    return (
    <div className="cart">
    <div className="cart-item">
    <p>Hassname:</p><p>{name}</p>
    </div>
    <div className="cart-item">
    <p>Cywwa:</p><p>{price}</p>
    </div>
    <div className="cart-item">
    <p>Konw+ecTBO:</p><p>{count}</p>
    </div>
    </div>
});

import type { IProduct } from './models'
{
export const PRODUCTS: IProduct[] - [
{
    name: "apple",
    price: 10,
    count: 10,
    ],
    {
    name: "banana",
    price: 20,
    count: 20,
    ],
    {
    name: "orange",
    price: 30,
    count: 30,
    ],
    {
    name: "bread",
    price: 50,
    count: 50,
    ],
    {
    name: "milk",
    price: 60,
    count: 60,
    ],
    {
    name: "eggs",
    price: 70,
    count: 70,
    ],
}