From the below UI I want to output something like this on my state. I want if checkmark on ketchup it will store in a array of object or object and after that if I checkmark on extra tomato it will store into the same object.

[{title: 'Barnes Chapman', options:{extra large: '8.0', ketchup: '1.00', extra tomato: '2' } }]

I have created a function but the function is not working properly. Below code is the initial code of my function. inside the product parameter there is title. e means the targeted value and name.

const [item, setItem]= useState()
const getItemValues =(e, product)=>{

}

JSX code: the checkbox values are dynamic. I have commented the values.

 {product.ingredients.map((ingredient) => {
                    return (
                      <li onChange={(e) => getItemValues(e.target, product)}>
                        <label className="container_check">
                          {ingredient.title}  // "ketchup"
                          <span>+ $2</span>
                          <input
                            type="checkbox"
                            value={ingredient.price} // "1"
                            name={ingredient.title} // "ketchup"
                          />
                          <span className="checkmark"></span>
                        </label>
                      </li>
                    );
                  })}