Button element added but it's not functioning yet

Author: areebsattar

src/components/App/App.jsx

@@ -4,6 +4,7 @@ import Footer from "../Footer/Footer";
 import Deck from "../Deck/Deck";
 import AppHeader from "../AppHeader/AppHeader";
 import Restaurant from "../Restaurant/Restaurant";
+import RestaurantButton from "../RestaurantButton/RestaurantButton";
 
 const App = () => (
   <div className="app">
@@ -15,7 +16,7 @@ const App = () => (
     </div>
     <Bookings />
     <Restaurant />
-
+    <RestaurantButton OrderOne={Restaurant().OrderOne}/>
     <Deck />
 
     <Footer

src/components/Restaurant/Restaurant.jsx

@@ -3,7 +3,7 @@ import { useState } from "react";
 function Restaurant() {
   const [pizzas, setPizzas] = useState(0);
 
-  function OrderOne() {
+  const OrderOne = () => {
     setPizzas(pizzas + 1);
   }
 
@@ -13,9 +13,6 @@ function Restaurant() {
       <ul className="restaurant__list">
         <li className="restaurant__item">
           Pizzas: {pizzas}{" "}
-          <button className="button restaurant__button" onClick={OrderOne}>
-            Add
-          </button>
         </li>
       </ul>
     </section>

src/components/RestaurantButton/RestaurantButton.jsx

@@ -0,0 +1,12 @@
+
+function RestaurantButton({ OrderOne }) {
+  return (
+    <>
+      <button type="button" className="button restaurant__button" onClick={OrderOne}>
+        Add Pizzas
+      </button>
+    </>
+  );
+}
+
+export default RestaurantButton