Error in displaying where there’s an a array inside of the object

this is what the data shows inside the console:

I tried displaying it with these but it failed

 {Object.entries(value).map(([key, value]) => {
        return (
          <p key={key}>
            <li>
              {key}
              {value}
              {console.log(value.id)} //this will show as undefined
            </li>
          </p>
        );
      })}

{value} will show this error :

Objects are not valid as a React child (found: object with keys {color, quantity}). If you meant to render a collection of children, use an array instead.

{value.id} or the {value.name} will show as undefined

With the map, it will say that value.map is not a function

 {value.map((value, key) => (
    <>
      <div>{value.id}</div>
      <div>{value.name}</div>
    </>
  ))}

codesandbox: https://codesandbox.io/s/display-the-manipulated-data-dy204r