Default Component - Copy this React, Mui Component to your project

this is my react code : import React, { useEffect, useState } from "react"; import { useParams } from "react-router-dom"; import NavHeader from "components/header/header"; import Footer from "components/footers/MiniCenteredFooter.js"; const Pharmacy = () => { const { id } = useParams(); const [medicines, setMedicines] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [cart, setCart] = useState({}); useEffect(() => { const fetchMedicines = async () => { try { const response = await fetch( http://127.0.0.1:3000/api/v1/pharmas/${id}/medicines ); const data = await response.json(); if (data.status === "success") { setMedicines(data.items); } else { throw new Error("Failed to fetch medicines"); } } catch (err) { setError(err.message); } finally { setLoading(false); } }; fetchMedicines(); }, [id]); return ( <> <NavHeader isMain={false} /> <div> {* Write code here*}</div> <Footer /> </> ); }; export default Pharmacy; I need to create a page for pharmacy Medicines and a cart and add the Medicines to it with quantity ,each Medicine has a photo ,name,price,quantity,need_prescription(use it to disable add to cart button if it true ) , type . I need also a cart button for show cart items and + and button for edit Medicine quantity , and it'shouldn't add Medicines quantity to the more than the quantity of Medicine.