How to allow user to update password?

Create settings page to allow user to update password.

// components/nav/Sidebar.js
<li className="nav-item">
  <NavLink className="nav-link" to="/user/settings">
    Settings
  </NavLink>
</li>

// pages/user/Settings.js
import Sidebar from "../../components/nav/Sidebar";
import PasswordUpdate from "../../components/forms/PasswordUpdate";

export default function Profile() {
  return (
    <div className="contaienr-fluid">
      <Sidebar />
      <div className="container mt-2">
        <PasswordUpdate />
      </div>
    </div>
  );
}

// App.js
<Route path="user/settings" element={<Settings />} />

// components/forms/PasswordUpdate.js
import { useState } from "react";
import axios from "axios";
import toast from "react-hot-toast";
import { useNavigate } from "react-router-dom";

// gets prop from main nav
export default function ProfileUpdate() {
  // state
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);
  // hooks
  const navigate = useNavigate();

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      setLoading(true);
      // console.log(username, name, email, company, address, phone, about, photo);
      const { data } = await axios.put("/update-password", { password });
      if (data?.error) {
        toast.error(data.error);
        setLoading(false);
      } else {
        setLoading(false);
        toast.success("Password updated");
      }
    } catch (err) {
      console.log(err);
      toast.error("Password update failed. Try again.");
      setLoading(false);
    }
  };

  return (
    <div className="container">
      <div className="row">
        <div className="col-lg-8 offset-lg-2 mt-1">
          <form onSubmit={handleSubmit}>
            <input
              name="password"
              type="password"
              placeholder="Update your password"
              className="form-control mb-4"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
            />

            <button className="btn btn-primary col-12 mb-4" disabled={loading}>
              {loading ? "Updating..." : "Update password"}
            </button>
          </form>
        </div>
      </div>
    </div>
  );
}