How to create object using two inputs?

Question

My object look like that

const Object = [{
name: "",
desc: "",
price: {
sizeA: "",
sizeB: "",
sizeC: ""
//Here I want to add
inputA.value: inputB.value 

But there is some syntax error. //
}}]

I try to make a configurator for client using Immer framework that he or she can add one button to configure new product, and second button to add as many sizes and prices as he or she needs.

I had no problem to create first button with first function, but I second one is beyond my power.

import "./styles.css";
import React, {useState, useEffect, useMemo, createRef, useCallback} from 'react'
import produce from "immer";
import { v4 as uuidv4 } from 'uuid';
import {Container, Row, Col, Table} from 'react-bootstrap'


const ObjectConfigure = [{
  id: 0,
  name: "Running Shoes",
  desc: "best shoes ever",
  price: [{
  "sizeA": 3,
  "sizeB": 4,
  "sizeC": 5
  }]
  }]

export default function App() {
  const [object, setObject] = useState(ObjectConfigure);
 const [itemName, setItemName] = useState([])
 const [itemValue, setItemValue] = useState([])

  const handleChange  =   useCallback(() => {
        
    setObject(
                  produce((draft) => {
                    draft.push({
                      "id": uuidv4(),
                     
                      
                        name: "Running Shoes",
                        desc: "best shoes ever",
                        price: [{
                        "sizeA": 3,
                        "sizeB": 4,
                        "sizeC": 5
                        }],
                      done: true
                    });
                  })
                );
              }, [object, setObject ]);
    
    
              const AddItemPrice  =   useCallback(() => {
                setObject(
                      produce((draft) => {
                       
                   draft[0].cena.push({"19kw": itemValue[0]})

//problem is that I can just add new item to array but I do not know how add new item to object 
I try 
draft[1].cena.19kw =  itemValue[0]
but get error with identifier.            

                        
  
                    
             
                }
                ))
              }, [object, setObject, ItemName, ItemValue ]);

              const handleToggles = useCallback((e, id) => {
                const { name, value } = e.target;
                setObject(
                    produce(setObject, draft => {
                const        objIndex = draft.findIndex((obj => obj.id === id));
    
                        draft[objIndex].[name] = value;     
                       }
    
                         
                
                
                    ))
                  }, [object, setObject ]);

  return (
    <Container style={{backgroundColor: "grey", color: "white"}}>
    <button onClick={handleChange}>Dodaj nowy moduł</button>
  
  
  
  
  
  <Table          responsive  striped bordered hover >
  <thead><tr><td>Nazwa usługi</td><td>usun</td></tr></thead>
  <tbody>
  {object.map((props, index) =>   {
      var obj = props?.price[index];
      var suuu = props?.price[index] && Object?.values(props?.price[index])
    

  
      
      return (
  <React.Fragment key={index}>
   <tr>
    <td>Name Product <input type="text" className="NazwaModul" name="name"  placeholder={props.name} onChange={ (e) => handleToggles(e, props.id)}    /> </td>
    <td> Description<input type="text" className="Description" name="descr" value={props.description}  onChange={ (e) => handleToggles(e, props.id)}/> </td>
  </tr>
      <button onClick={AddItemPrice}>Dodaj produkt z ceną</button>
   
  { props?.price[index] &&  Object.keys(props?.price[index]).map((klucze, ind) => {
  
      
      return( 
      
      <React.Fragment key={ind}>
      <div>
         <select type="text" value={klucze} onChange={(e) => setItemName(prev => [...prev, e])}>
          {options.map((opt, i) => (<React.Fragment key={i}>
              <option value={opt}>{opt}</option>
  
              </React.Fragment>
          ))}
      )</select>
  <input type="number" value={suuu[ind]} onChange={(e) => setItemValue(prev => [...prev, e])}/>
  
      </div>
      </React.Fragment>
       ) })}
      
  
  
       
  
  
      </React.Fragment>
  )})
  }</tbody>
  </Table>
  
  </Container>
  );
}

const options = ["sizeA", "sizeB",  "sizeC", "sizeD", " sizeE"]

CodeSand