diff --git a/package.json b/package.json
index 91dcbdd..fd868b4 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,9 @@
     "@testing-library/user-event": "^7.1.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-scripts": "^4.0.2"
+    "react-redux": "^8.0.5",
+    "react-scripts": "^4.0.2",
+    "redux": "^4.2.0"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/components/Cart.js b/src/components/Cart.js
index c51b442..ea6334d 100644
--- a/src/components/Cart.js
+++ b/src/components/Cart.js
@@ -1,5 +1,6 @@
-import React from 'react';
-import CartItem from './CartItem';
+import React from "react";
+import CartItem from "./CartItem";
+import { connect } from "react-redux";
 
 class Cart extends React.Component {
   constructor(props) {
@@ -14,46 +15,65 @@ class Cart extends React.Component {
   open = () => {
     this.setState({ isOpen: true });
   };
+  totalItemsInCart = () => {
+    return this.props.cart.reduce((acc, cur) => {
+      acc += cur.quantity;
+      return acc;
+    }, 0);
+  };
+  subTotal = () => {
+    return this.props.cart.reduce((acc, cur) => {
+      acc += cur.price * cur.quantity;
+      return acc;
+    }, 0);
+  };
+  alertSubTotal = () => {
+    alert(`Checkout - Subtotal: $ ${this.subTotal().toFixed(2)}`);
+  };
   render() {
     const { isOpen } = this.state;
     if (!isOpen) {
-      return <ClosedCart open={this.open} />;
+      return (
+        <ClosedCart open={this.open} totalItemsInCart={this.totalItemsInCart} />
+      );
     }
     return (
-      <aside className='cart'>
-        <div onClick={this.close} className='close-btn'>
+      <aside className="cart">
+        <div onClick={this.close} className="close-btn">
           X
         </div>
-        <div className='cart-body'>
-          <div className='cart-heading'>
-            <div className='cart-icon'>
+        <div className="cart-body">
+          <div className="cart-heading">
+            <div className="cart-icon">
               <svg
-                xmlns='http://www.w3.org/2000/svg'
-                fill='none'
-                viewBox='0 0 24 24'
-                stroke='currentColor'
-                className='icon'
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                className="icon"
               >
                 <path
-                  strokeLinecap='round'
-                  strokeLinejoin='round'
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
                   strokeWidth={2}
-                  d='M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z'
+                  d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
                 />
               </svg>
-              <span className='item-count'>4</span>
+              <span className="item-count">{this.totalItemsInCart()}</span>
             </div>
             <h2>Cart</h2>
           </div>
-          <CartItem />
-          <CartItem />
 
-          <div className='cart-checkout'>
+          {this.props.cart.map((product) => (
+            <CartItem key={product.id} {...product} />
+          ))}
+
+          <div className="cart-checkout">
             <div>
               <p>SUBTOTAL</p>
-              <p>$ 199.00</p>
+              <p>$ {this.subTotal().toFixed(2)}</p>
             </div>
-            <button>CHECKOUT</button>
+            <button onClick={this.alertSubTotal}>CHECKOUT</button>
           </div>
         </div>
       </aside>
@@ -63,28 +83,34 @@ class Cart extends React.Component {
 
 function ClosedCart(props) {
   return (
-    <div className='close-cart'>
-      <span onClick={props.open} className='open-btn'>
-        <div className='cart-icon'>
+    <div className="close-cart">
+      <span onClick={props.open} className="open-btn">
+        <div className="cart-icon">
           <svg
-            xmlns='http://www.w3.org/2000/svg'
-            fill='none'
-            viewBox='0 0 24 24'
-            stroke='currentColor'
-            className='icon'
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            className="icon"
           >
             <path
-              strokeLinecap='round'
-              strokeLinejoin='round'
+              strokeLinecap="round"
+              strokeLinejoin="round"
               strokeWidth={2}
-              d='M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z'
+              d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
             />
           </svg>
-          <span className='item-count'>4</span>
+          <span className="item-count">{props.totalItemsInCart()}</span>
         </div>
       </span>
     </div>
   );
 }
 
-export default Cart;
+export default connect(mapStateToProps)(Cart);
+
+function mapStateToProps(state) {
+  return {
+    cart: state.cart,
+  };
+}
diff --git a/src/components/CartItem.js b/src/components/CartItem.js
index 1b3bd46..6739e50 100644
--- a/src/components/CartItem.js
+++ b/src/components/CartItem.js
@@ -1,64 +1,87 @@
-import React from 'react';
+import React from "react";
+import { useDispatch } from "react-redux";
+import {
+  decrementQuantity,
+  incrementQuantity,
+  removeItem,
+} from "../store/actions";
 
 function CartItem(props) {
+  const dispatch = useDispatch();
+
+  const handleIncrement = (id) => {
+    dispatch(incrementQuantity(id));
+  };
+
+  const handleDecrement = (id) => {
+    dispatch(decrementQuantity(id));
+  };
+
+  const handleRemoveItem = (id) => {
+    dispatch(removeItem(id));
+  };
   return (
-    <div className='cart-item'>
-      <img
-        src='/static/products/876661122392077_2.jpg'
-        alt=''
-        width='80'
-      />
-      <div className='cart-item-details'>
-        <p className='cart-item-name'>
-          Sphynx Tie Dye Wine T-Shirt
+    <div className="cart-item">
+      <img src={`/static/products/${props.sku}_2.jpg`} alt="" width="80" />
+      <div className="cart-item-details">
+        <p className="cart-item-name">{props.title}</p>
+        <p>
+          {props.size} | {props.style}
         </p>
-        <p>X | Front tie dye</p>
-        <p>print Quantity: 1</p>
+        <p>Quantity: {props.quantity}</p>
       </div>
-      <div className='cart-price'>
-        <p className='cart-cross'>x</p>
-        <p className='price'>$ 19.00</p>
+      <div className="cart-price">
+        <p className="cart-cross" onClick={() => handleRemoveItem(props.id)}>
+          x
+        </p>
+        <p className="price">$ {(props.quantity * props.price).toFixed(2)}</p>
         <div>
-          <Increment />
-          <Decrement />
+          <Increment onClick={() => handleIncrement(props.id)} />
+          <Decrement
+            onClick={
+              props.quantity === 1 ? () => {} : () => handleDecrement(props.id)
+            }
+          />
         </div>
       </div>
     </div>
   );
 }
 
-function Increment() {
+function Increment(props) {
   return (
     <svg
-      xmlns='http://www.w3.org/2000/svg'
-      fill='none'
-      viewBox='0 0 24 24'
-      stroke='currentColor'
-      className='plus-icon'
+      onClick={props.onClick}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      className="plus-icon"
     >
       <path
-        strokeLinecap='round'
-        strokeLinejoin='round'
+        strokeLinecap="round"
+        strokeLinejoin="round"
         strokeWidth={2}
-        d='M12 6v6m0 0v6m0-6h6m-6 0H6'
+        d="M12 6v6m0 0v6m0-6h6m-6 0H6"
       />
     </svg>
   );
 }
-function Decrement() {
+function Decrement(props) {
   return (
     <svg
-      xmlns='http://www.w3.org/2000/svg'
-      fill='none'
-      viewBox='0 0 24 24'
-      stroke='currentColor'
-      className='plus-icon'
+      onClick={props.onClick}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      className="plus-icon"
     >
       <path
-        strokeLinecap='round'
-        strokeLinejoin='round'
+        strokeLinecap="round"
+        strokeLinejoin="round"
         strokeWidth={2}
-        d='M18 12H6'
+        d="M18 12H6"
       />
     </svg>
   );
diff --git a/src/components/Products.js b/src/components/Products.js
index 70f47d8..3b630d3 100644
--- a/src/components/Products.js
+++ b/src/components/Products.js
@@ -1,5 +1,8 @@
 import React from "react";
 import OrderBy from "./OrderBy";
+import { connect } from "react-redux";
+import { useDispatch } from "react-redux";
+import { addProductToCart } from "../store/actions";
 
 class Products extends React.Component {
   constructor(props) {
@@ -25,16 +28,20 @@ class Products extends React.Component {
 
   render() {
     let { selectedOrder } = this.state;
-    let products = this.handleOrderProducts(selectedOrder, this.props.data);
+
+    const data =
+      this.props.sizes.length !== 0
+        ? this.props.data.filter((item) =>
+            item.availableSizes.some((size) => this.props.sizes.includes(size))
+          )
+        : this.props.data;
+
+    let products = this.handleOrderProducts(selectedOrder, data);
 
     return (
       <div>
         <div className="products-filter">
-          <p>
-            {`${this.props.data.length} Product${
-              this.props.data.length > 1 ? "s" : ""
-            } found.`}{" "}
-          </p>
+          <p>{`${data.length} Product${data.length > 1 ? "s" : ""} found.`} </p>
           <OrderBy
             selectedOrder={selectedOrder}
             handleOrderBy={this.handleOrderBy}
@@ -42,7 +49,7 @@ class Products extends React.Component {
         </div>
         <div className="flex wrap">
           {products.map((product) => (
-            <Product {...product} />
+            <Product key={product.id} {...product} />
           ))}
         </div>
       </div>
@@ -51,6 +58,12 @@ class Products extends React.Component {
 }
 
 function Product(props) {
+  const dispatch = useDispatch();
+
+  const handleClick = (product) => {
+    dispatch(addProductToCart(product));
+  };
+
   return (
     <div className="product-item">
       <div className="product-label">Free Shipping</div>
@@ -65,9 +78,25 @@ function Product(props) {
         <h3 className="product-item-price">
           {props.currencyFormat + props.price}
         </h3>
-        <button>Add To Cart</button>
+        <button
+          onClick={() =>
+            handleClick({
+              ...props,
+              quantity: 1,
+              size: props.availableSizes[0],
+            })
+          }
+        >
+          Add To Cart
+        </button>
       </div>
     </div>
   );
 }
-export default Products;
+export default connect(mapStateToProps)(Products);
+
+function mapStateToProps(state) {
+  return {
+    sizes: state.sizes,
+  };
+}
diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
index a05b530..73e9c73 100644
--- a/src/components/Sidebar.js
+++ b/src/components/Sidebar.js
@@ -1,14 +1,30 @@
+import { useDispatch, useSelector } from "react-redux";
+import selectSize from "../store/actions";
 function Sidebar({ products }) {
   let sizes = products.reduce((acc, cv) => {
     acc = acc.concat(cv.availableSizes);
     return acc;
   }, []);
   let uniqueSizes = [...new Set(sizes)];
+
+  const dispatch = useDispatch();
+  const sizesState = useSelector((state) => state.sizes);
+
+  const handleClick = (size) => {
+    dispatch(selectSize(size));
+  };
+
   return (
     <aside className="flex-20 sidebar">
       <div className="flex wrap">
-        {uniqueSizes.map((size) => (
-          <span className="size">{size}</span>
+        {uniqueSizes.map((size, index) => (
+          <span
+            key={index}
+            className={`size ${sizesState.includes(size) ? "active" : ""}`}
+            onClick={() => handleClick(size)}
+          >
+            {size}
+          </span>
         ))}
       </div>
     </aside>
diff --git a/src/index.js b/src/index.js
index 47e9199..0fa581e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,13 @@
 import React from "react";
 import { render } from "react-dom";
+import { Provider } from "react-redux";
 import App from "./components/App";
 import "./style/index.css";
+import store from "../src/store";
 
-render(<App />, document.getElementById("root"));
+render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById("root")
+);
diff --git a/src/store/actions.js b/src/store/actions.js
new file mode 100644
index 0000000..6fc1ee5
--- /dev/null
+++ b/src/store/actions.js
@@ -0,0 +1,34 @@
+export default function selectSize(size) {
+  return {
+    type: "select_size",
+    payload: size,
+  };
+}
+
+export function addProductToCart(product) {
+  return {
+    type: "add_product",
+    payload: product,
+  };
+}
+
+export function incrementQuantity(id) {
+  return {
+    type: "increment_quantity",
+    payload: id,
+  };
+}
+
+export function decrementQuantity(id) {
+  return {
+    type: "decrement_quantity",
+    payload: id,
+  };
+}
+
+export function removeItem(id) {
+  return {
+    type: "remove_item",
+    payload: id,
+  };
+}
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..f5c873f
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,59 @@
+import { createStore } from "redux";
+
+const initialState = {
+  sizes: [],
+  cart: [],
+};
+
+function incQuantity(state, id) {
+  return {
+    ...state,
+    cart: state.cart.map((product) => {
+      if (product.id === id) {
+        product.quantity++;
+      }
+      return product;
+    }),
+  };
+}
+
+function reducer(state = initialState, action) {
+  switch (action.type) {
+    case "select_size":
+      return state.sizes.includes(action.payload)
+        ? {
+            ...state,
+            sizes: state.sizes.filter((size) => size !== action.payload),
+          }
+        : { ...state, sizes: [...state.sizes, action.payload] };
+    case "add_product":
+      if (state.cart.some((product) => product.id === action.payload.id)) {
+        return incQuantity(state, action.payload.id);
+      }
+      return { ...state, cart: [...state.cart, action.payload] };
+
+    case "remove_item":
+      return {
+        ...state,
+        cart: state.cart.filter((product) => product.id !== action.payload),
+      };
+    case "increment_quantity":
+      return incQuantity(state, action.payload);
+
+    case "decrement_quantity":
+      return {
+        ...state,
+        cart: state.cart.map((product) => {
+          if (product.id === action.payload) {
+            product.quantity--;
+          }
+          return product;
+        }),
+      };
+    default:
+      return state;
+  }
+}
+
+let store = createStore(reducer);
+export default store;
diff --git a/yarn.lock b/yarn.lock
index 91f0999..be14c4a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1179,6 +1179,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.1", "@babel/runtime@^7.9.2":
+  version "7.20.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.1.tgz#1148bb33ab252b165a06698fde7576092a78b4a9"
+  integrity sha512-mrzLkl6U9YLF8qpqI7TB82PESyEGjm/0Ly91jG575eVxMMlb8fYfOXFZIJ8XfLrJZQbm7dlKry2bJmXBUEkdFg==
+  dependencies:
+    regenerator-runtime "^0.13.10"
+
 "@babel/runtime@^7.5.1", "@babel/runtime@^7.6.0", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2":
   version "7.7.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.6.tgz#d18c511121aff1b4f2cd1d452f1bac9601dd830f"
@@ -1843,6 +1850,14 @@
   dependencies:
     "@types/node" "*"
 
+"@types/hoist-non-react-statics@^3.3.1":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/html-minifier-terser@^5.0.0":
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#3c9ee980f1a10d6021ae6632ca3e79ca2ec4fb50"
@@ -1989,6 +2004,11 @@
   dependencies:
     source-map "^0.6.1"
 
+"@types/use-sync-external-store@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
+  integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
+
 "@types/webpack-sources@*":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-2.1.0.tgz#8882b0bd62d1e0ce62f183d0d01b72e6e82e8c10"
@@ -5735,6 +5755,13 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hoopy@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
@@ -9551,6 +9578,11 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
+react-is@^16.7.0:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
 react-is@^16.8.1, react-is@^16.8.4:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
@@ -9561,6 +9593,23 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
   integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
 
+react-is@^18.0.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
+  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+
+react-redux@^8.0.5:
+  version "8.0.5"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.0.5.tgz#e5fb8331993a019b8aaf2e167a93d10af469c7bd"
+  integrity sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    "@types/hoist-non-react-statics" "^3.3.1"
+    "@types/use-sync-external-store" "^0.0.3"
+    hoist-non-react-statics "^3.3.2"
+    react-is "^18.0.0"
+    use-sync-external-store "^1.0.0"
+
 react-refresh@^0.8.3:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
@@ -9729,6 +9778,13 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+redux@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13"
+  integrity sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
 regenerate-unicode-properties@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
@@ -9746,6 +9802,11 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
+regenerator-runtime@^0.13.10:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
 regenerator-runtime@^0.13.2:
   version "0.13.3"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
@@ -11452,6 +11513,11 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-sync-external-store@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"