please i am trying to dynamically set array object into input field and send it to the backend. thanks

when i console.log printOut, it return undifined. hi everyone, please i am trying to dynamically set array object into input field and send it to the backend. thanks

hi everyone, please i am trying to dynamically set array object into input field and send it to the backend. thanks

const myArr= [
        {product: 'egg', price: 5, id:1},
        {product: 'cake', price: 3, id:2}
    ]

    const [input, setInput] = useState(myArr)


      const changeHandler = (id) => event => {
        const { name, value } = event.target;
        setInput(input => input.map((el) => el.id === id
          ? {
              ...el,
              [name]: value,
            }
          : el,
        ));
      };

    const submitForm = (e) =>{
        e.preventDefault();
        
        let printOut = input
            
        
        console.log({print:printOut});
        try {
            axios.post('/products/print', printOut)
        } catch (error) {
            console.log(error);
        }
    }

    return (
        <form onSubmit={submitForm}>
            {myArr.map(x=>(
                <div key={x.id}>
                    <input name='product' value= {x.product} onChange={(e) =>changeHandler(x.id)(e)}  />
                    <input name='price' value= {x.price} onChange={(e)=> changeHandler(x.id)(e)} />
                    
                </div>
            ))}
            <input type="submit" value="Submit" />
        </form>
    )