Update user details using React and firebase

Using react and firebase, I want to update my users details using their document id.

the user variable is attempting to find an object in an array of objects (props.users) that matches a certain condition (element.id === props.docID).

The docRef variable is creating a reference to a Firestore document by providing the collection path (“users”) and the document ID (props.docID)

Can anyone help me fix the issue. and thanks.

import React, { useEffect, useState } from "react";
import { doc, updateDoc } from "firebase/firestore";
import { db } from "../../Firebase.js";

import TextInput from "../../shared/components/UIElements/TextInput";

const ViewUserDetails = (props) => {
  const user = props.users?.find((element) => element.id === props.docID);
  const [updatedUser, setUpdatedUser] = useState({});
  const docRef = doc(db, "users", props.docID);

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setUpdatedUser({ ...updatedUser, [name]: value });
  };

  const updateUserDetails = () => {
    updateDoc(docRef, updatedUser)
      .then((docRef) => {
        console.log("updated");
      })
      .catch((error) => {
        console.log(error);
      });
  };
return (
    <div className="overflow-hidden bg-white shadow sm:rounded-lg">
      <div className="px-4 py-5 sm:px-6">
        <div className=" inline-flex w-full justify-between">
          <h3 className="text-base font-semibold leading-6 text-gray-900 justify-start">
            User details
          </h3>
          <div className="inline-flex">
            <p className="my-auto mr-3 max-w-2xl text-sm text-gray-500">
              Status
            </p>
            <div className={`badge badge-${statusColor} badge-outline m-auto`}>
              active
            </div>
          </div>
        </div>
        <p className="mt-1 max-w-2xl text-sm text-gray-500">Account details.</p>
      </div>

      <div className="border-t border-gray-200 grid grid-cols-1 md:grid-cols-2 px-8 pb-4 gap-y-3">
        <div>
          <TextInput label="First Name">{user?.firstName}</TextInput>
        </div>
        <div>
          <TextInput label="Last Name">{user?.lastName}</TextInput>
        </div>
        <div>
          <TextInput label="Email">{user?.email}</TextInput>
        </div>
        <div>
          <TextInput label="Company">{user?.company}</TextInput>
        </div>
        <div>
          <TextInput label="Job title">{user?.jobTitle}</TextInput>
        </div>
        <div>
          <TextInput label="Country">{user?.country}</TextInput>
        </div>
        <div>
          <TextInput label="Phone">{user?.phone}</TextInput>
        </div>
        <div>
          <div className="form-control w-full max-w-xs">
            <label className="justify-start label">
              <span className="label-text">Role</span>
            </label>
            <select
              className="select select-primary select-bordered"
              onChange={
                props.onChange
                  ? (e) => {
                      props.onChange(e.target.value);
                    }
                  : null
              }
            >
              <option disabled selected>
                {user?.role}
              </option>
              <option>admin</option>
              <option>client</option>
              <option>human resources</option>
              <option>webmaster</option>
            </select>
          </div>
        </div>
        <button className="btn btn-primary" onClick={updateUserDetails}>
          Save
        </button>
      </div>
    </div>
  );
};

export default ViewUserDetails;