title: Data structure when submitting in Firestore that handles tracking of inventories with product variations
body: <p>Each product may have variations of sizes and each with its different colors and quantities.</p>
  <p>Example:</p>
  <ul>
  <li><p><strong>Product Name: Shirt</strong></p>
  </li>
  <li><p>Size: Large</p>
  </li>
  <li><p>Color: Red, Qty: 10</p>
  </li>
  <li><p>Color: Blue, Qty: 5</p>
  </li>
  <li><p><strong>Product Name: Cupp</strong></p>
  </li>
  <li><p>Size: Large</p>
  </li>
  <li><p>Color: Red, Qty: 10</p>
  </li>
  <li><p>Color: Blue, Qty: 5</p>
  </li>
  </ul>
  <p>The way I submitted it and what shows in the console:</p>
  <p><a href="https://i.stack.imgur.com/ehyTc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ehyTc.png" alt="enter image description here" /></a></p>
  <p>Code:
  Link: <a href="https://codesandbox.io/s/form-order-working-4f6g2" rel="nofollow noreferrer">https://codesandbox.io/s/form-order-working-4f6g2</a></p>
  <p><strong>Firestore:</strong></p>
  <p><a href="https://i.stack.imgur.com/DnvFj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DnvFj.png" alt="enter image description here" /></a></p>