hello i am trying to map items stored in my redux into a form . I created a component called PAYMENT.js that gives a format of how the item should be arranged THIS IS A REACT PROJECT

PAYMENT.JS

import React from "react";

function Payment({ name, price, count, itemSize }) {

  return (
    <div>
      <p> {name}, {itemSize}, {count} </p>
    </div>
  );
}

export default Payment;

I want it to be mapped in an input feild , this feild would be readable .

Here is it

<div class="telephone">
                <label for="name"></label>
                <input
                  className="payment_form"
                  type="text"
                  placeholder="My address"
                  name="telephone"
                  value={items.map((item, id) => (
                    <Payment
                      id={items.id}
                      key={id}
                      name={item.name}
                      price={item.price}
                      size={item.size}
                      image1={item.image1}
                      itemSize={item.itemSize}
                      count={item.count}
                    />
                  ))}
                  id="telephone_input"
                  required
                />
              </div>

i get [OBJECT , OBJECT ][OBJECT , OBJECT ] Instead of the actual object . Putting the map function in a p tag and iget the value of the items in the redux

<p>
                {" "}
                {items.map((item, id) => (
                  <Payment
                    id={items.id}
                    key={id}
                    name={item.name}
                    price={item.price}
                    size={item.size}
                    image1={item.image1}
                    itemSize={item.itemSize}
                    count={item.count}
                  />
                ))}
              </p>

OUTPUT Von dutch pink, Xtra large, 1

Von dutch camoeo, Xtra large, 2

Von dutch pink, Xtra large, 3

I want this out put to show in the input feild so i can send it over