I am making a form that sends over the shipping details of a user . I am however finding it difficult to map over the shipping other in an input field that is immutable(read only). I keep getting this in the input field [object, object] in the browser . I want the details of the objects to show instead.

Here is a snippet of the code

<div class="telephone">
                <label for="name"></label>
                <input
                  type="text"
                  name="username"
                  value={items.map((item, id) => (
                    <Payment
                      key={id}
                      name={item.name}
                      price={item.price}
                      itemSize={item.itemSize}
                      count={item.count}
                    />
                  ))}
                  readonly
                />
              </div>