How to create user profile update page?

// nav/Sidebar.js
<li className="nav-item">
  <NavLink className="nav-link" to="/user/profile">
    Update Profile
  </NavLink>
</li>

To create unique usernames that can be used as slug to display user public profile, use slugify from npm

npm i slugify

// pages/user/Profile.js
import Sidebar from "../../components/nav/Sidebar";
import ProfileUpdate from "../../components/forms/ProfileUpdate";

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

// import in App.js
<Route path="user/profile" element={<Profile />} />

// components/forms/ProfileUpdate.js
import { useState, useEffect } from "react";
import { useAuth } from "../../context/auth";
import axios from "axios";
import toast from "react-hot-toast";
import { useNavigate } from "react-router-dom";
import slugify from "slugify";
import ProfileUpload from "./ProfileUpload";

// gets prop from main nav
export default function ProfileUpdate() {
  // context
  const [auth, setAuth] = useAuth();
  // state
  // username name email company address phone about
  const [username, setUsername] = useState("");
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [company, setCompany] = useState("");
  const [address, setAddress] = useState("");
  const [phone, setPhone] = useState("");
  const [about, setAbout] = useState("");
  const [loading, setLoading] = useState(false);
  const [photo, setPhoto] = useState(null);
  const [uploading, setUploading] = useState(false);
  // hooks
  const navigate = useNavigate();

  useEffect(() => {
    if (auth.user) {
      setUsername(auth.user?.username);
      setName(auth.user?.name);
      setEmail(auth.user?.email);
      setCompany(auth.user?.company);
      setAddress(auth.user?.address);
      setPhone(auth.user?.phone);
      setAbout(auth.user?.about);
      setPhoto(auth.user?.photo);
    }
  }, [auth.user]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      console.log(username, name, email, company, address, phone, about, photo);
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <div className="container">
      <div className="row">
        <div className="col-lg-8 offset-lg-2 mt-1">
          <form onSubmit={handleSubmit}>
            <div className="d-flex justify-content-between">
              <label htmlFor="">
                Username <small>Must be unique</small>
              </label>
            </div>

            <input
              name="username"
              type="text"
              placeholder="Update your username"
              className="form-control mb-4"
              value={username}
              onChange={(e) =>
                setUsername(slugify(e.target.value.toLowerCase()))
              }
            />

            <input
              type="text"
              placeholder="Enter your name"
              className="form-control mb-4"
              value={name}
              onChange={(e) => setName(e.target.value)}
            />
            <input
              type="text"
              placeholder={email}
              className="form-control mb-4"
              disabled={true}
            />
            <input
              type="text"
              placeholder="Enter your company name"
              className="form-control mb-4"
              value={company}
              onChange={(e) => setCompany(e.target.value)}
            />
            <input
              type="text"
              placeholder="Enter address"
              className="form-control mb-4"
              value={address}
              onChange={(e) => setAddress(e.target.value)}
            />
            <input
              type="text"
              placeholder="Enter your phone number"
              className="form-control mb-4"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
            />
            <textarea
              placeholder="Write something interesting about yourself"
              className="form-control mb-4"
              value={about}
              onChange={(e) => setAbout(e.target.value)}
            />

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

// App.js
<Route path="user/profile" element={<ProfileUpdate />} />