React Uncaught TypeError: map is not a function

基本 mapを利用する対象が配列になっていないことのエラー

import React, { useState } from 'react'


const Basic2 = () => {

  // setProductsは値監視
  const [products, setProducts] = useState([])

  const newProducts = () => {

//ここが配列になっていなかった
    setProducts([...products, {

      id: products.length,
      name: "Hellow React!!"
    }])
  }

  return (
    <div>

      <button onClick={newProducts}> add list </button>

      <ul>

//エラー箇所
        {products.map(product => (

          <li key={product.id}> {product.name} id: {product.id}</li>

        ))}
      </ul>

    </div>
  )
}

export default Basic2