You should make your TextFields controlled component by adding state to them:

  const [itemName, setItemName] = useState('')
  const [itemDest, setItemDest] = useState('')

  const onAddNewItem = () => {
    api.call(itemName, itemDest) // or whatever you want
    console.log(itemName)
    console.log(itemDest)
    setItemName('')
    setItemDest('')
  }

  return (
    <Dialog>
      <DialogContent sx={{ display: 'flex', flexDirection: 'column' }}>
        <TextField
          id="item-name"
          label="Item Name"
          value={itemName}
          onChange={e => {
            setItemName(e.target.value)
          }}
        />
        <TextField
          id="item-description"
          label="Item Description"
          multiline
          value={itemDest}
          onChange={e => {
            setItemDest(e.target.value)
          }}
        />
      </DialogContent>
      <DialogActions>
        <Button onClick={onAddDialogClose}>Cancel</Button>
        <Button onClick={onAddNewItem}>Add Item</Button>
      </DialogActions>
    </Dialog>
  )