what i got after conversion :

I am currently working on the react project that takes the user input that from the dropdown and input text field, i am getting the index as an tag in the xml conversion i want to get rid of it from the conversion of xml.

i am facing this isssue because the array to object conversion creates indexs as keys of the new object from the array.

<contacts>
    <0>
        <contactDetails>
            <contactType>Email</contactType>
            <contactValue>asdfasdf</contactValue>
        </contactDetails>
    </0>
    <1>
        <contactDetails>
            <contactType>Email</contactType>
            <contactValue>asdfasdf</contactValue>
        </contactDetails>
    </1>
</contacts>



//my object to xml convertion function : 

export const OBJtoXML = (obj) => {
  var xml = "";
  for (var prop in obj) {
    if (!obj.hasOwnProperty(prop)) {
      continue;
    }
    if (obj[prop] === undefined) continue;
    xml += `<${prop}>`;
    if (typeof obj[prop] == "object") {
      if (obj[prop].constructor === "object") {
        for (var i = 0; i < obj[prop].length; i++) {
          xml += "<item>";
          xml += OBJtoXML(new Object(obj[prop]));
          xml += "</item>";
        }
      } else {
        xml += OBJtoXML(new Object(obj[prop]));
      }
    } else {
      xml += obj[prop];
    }
    xml += `</${prop}>`;
  }
  return xml;
};

//in create user component
//i am coverting in this way:
// the object i am creating is

const [contactType, setContactType] = useState("");
const [contactValue, setContactValue] = useState("");
const [contactsDetailsArray] = useState([]);
const [contactsDetailsArrayObj] = useState({
  contacts: contactsDetailsArray,
});

export const CreateUser = () => {
  //constructor
  function contactDetails(contactType, contactValue) {
    this.contactType = contactType;
    this.contactValue = contactValue;
  }
  //function add contacts to the object on the button click and genetate the table
  const addContacts = () => {
    if (!contactType || !contactValue) {
      alert("invalid");
      return;
    } else {
      //step-7
      const contactStructure = new contactDetails(contactType, contactValue);
      const newContact = { contactDetails: contactStructure };
      contactsDetailsArray.push(newContact);
    }
    console.log("newContact", contactsDetailsArray);
    //clear input after contact added
    setContactType("");
    setContactValue("");
  };
  var contactsString = OBJtoXML(contactsDetailsArrayObj);

  return (
    <>
      <div className="row">
        <Table bordered hovered striped>
          <thead>
            <tr style={tablestyle.centerTable}>
              <th scope="col">Sr.No.</th>
              <th scope="col">Contact Type</th>
              <th scope="col">Value</th>
              <th scope="col">Actions</th>
            </tr>
          </thead>
          <tbody>
            {contactsDetailsArray?.map((item, index) => (
              <tr key={item._id} style={tablestyle.centerTable}>
                <td>{index + 1}</td>
                <td>{item.contactDetails.contactType}</td>
                <td>{item.contactDetails.contactValue}</td>
                <td>
                  <div className="d-flex justify-content-evenly">
                    <Link
                      type="button"
                      onClick={() => {
                        deleteContact(index);
                      }}
                    >
                      delete
                    </Link>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </Table>
      </div>
    </>
  );
};

this is the correct format i want to store in the database in the string format of this xml conversion. help me to achive this goal.

<contacts>
    <contactDetails>
        <contactType>Email</contactType>
        <contactValue>asdfasdf</contactValue>
    </contactDetails>
    <contactDetails>
        <contactType>Email</contactType>
        <contactValue>asdfasdf</contactValue>
    </contactDetails>
</contacts>