Cant run my code because of a uncaughtTypeError [duplicate]

Ok so here’s the deal, I am trying to make this shopping cart app; because why not? And I made my code exactly as it was meant to be done, but when I tried running it, the error report says there is some code that I have not made yet, or that there is noting within the innerHTML. Here’s how it reads “uncaughtTypeError; cannot set properties of null(setting innerHTML) I am using HTML, css, and JavaScript.

Heres the source code:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.header {
  height: 80px;
  width: 70%;
  background-color: goldenrod;
  border-radius: 3px;
  margin: 30px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
}

.header .logo {
  font-size: 30px;
  font-weight: bold;
  color: #fff;
}

.cart {
  display: flex;
  background: #fff;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  border-radius: 3px;
  width: 80px;
}

.cart p {
  height: 22px;
  width: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 22px;
  background-color: goldenrod;
  color: #fff;
}

.container {
  display: flex;
  width: 70%;
  margin-bottom: 30px;
}

<!Doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>cart</title>
  <link rel="stylesheet" href="macally.css">
</head>

<body>
  <div class="header">
    <p class="logo">Bomber Jacket</p>

    <div class="cart"><svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-cart4" viewBox="0 0 16 16">
  <path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 

6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5M3.14 5l.5 2H5V5zM6 

5v2h2V5zm3 0v2h2V5zm3 0v2h1.36l.5-2zm1.11 3H12v2h.61zM11 8H9v2h2zM8 8H6v2h2zM5 8H3.89l.5 2H5zm0 

5a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0m9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-2

 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0"/>
</svg>
      <p id="count">0</p>
    </div>
  </div>
  <div class="container">
    <div class="root"></div>
    <div class="sidebar">
      <div class="head">
        <p>My cart</p>
      </div>
      <div id="cartItem">Your cart is empty</div>
      <div class="foot">
        <h3>Total</h3>
        <h2 id="total">$ 0.00</h2>
      </div>
    </div>
  </div>

  <script type="text/javascript">
    const product = [{
        id: 0,
        image: 'product/sonic.jpg',
        title: 'Sonic outfit kids',
        price: 30,
      },
      {
        id: 1,
        image: "product/bomber-jacket.jpg",
        title: "bomber-jacket",
        price: 65,
      },
      {
        id: 2,
        image: "product/echo.jpeg",
        title: "amazon echo device",
        price: 50,
      }
    ];

    const categories = [...new Set(product.map((item) => {
      return item
    }))]

    let i = 0;
    document.getElementById('root').innerHTML = categories.map((item) => {
      let {
        image,
        title,
        price
      } = item;

      return (
        `<div class='box'>
                        <div class='img-box'>
                            <img class='images' src=${image}></img>
                            </div>
                            <div class= 'bottom'>
                            <p>${title}</p>
                            <h2>$ ${price}.00</h2>` +
        "<button onclick= 'addtocart(" + (i++) + ")'>Add to cart</button>" +
        `</div>
                            </div>`
      )
    }).join('')
  </script>
</body>

</html>

I tried running it, but I dosent do anything, I have alredy reviewed the procedure to make sure I wrote my code correctly and I did. I just cant fugure out what I am missing.