Uncaught typeerror: cannot read properties of undefined (reading 'path')

See more:

Javascript

ReactJS

Why am i getting this error here :
here is my home.js :

<pre>import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { v4 } from "uuid";
import { auth, database } from "./firebase";
import "./Home.css";
import bigProfileImg from "./icons/account-circle-line.svg";
import Modal from "./Modal.js";
import Navbar from "./Navbar";
import dogPost1 from "./Photos/dog-img-1.jpg";
import dogPost2 from "./Photos/dog-img-2.jpg";
import dogPost3 from "./Photos/dog-img-3.jpg";
import dogPost4 from "./Photos/dog-img-4.jpg";
import dogPost5 from "./Photos/dog-img-5.jpg";
import dogPost6 from "./Photos/dog-img-6.jpg";

import { onValue } from "firebase/database";
import { ref as myRef } from "firebase/storage";
import settingsImg from "./icons/settings-line.svg";
import reelsImg from "./Photos/reels-icon.webp";
function Profile() {
  const [users, setUsers] = useState([]);
  const navigate = useNavigate();
  const [usernameValue, setUsernameValue] = useState("");
  const [bioValue, setBioValue] = useState("");
  const [nameValue, setNameValue] = useState("");
  const [phoneNumberValue, setPhoneNumberValue] = useState("");

  useEffect(() => {
    auth.onAuthStateChanged((user) => {
      user ? navigate("/") : navigate("/login");
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  useEffect(() => {
    onValue(myRef(database, "/users/devcontractoruhkgmailcom/"), (snapshot) => {
      console.log(snapshot.val());
    });
  });
  const [openModal, setOpenModal] = useState(false);

  function hidden() {
    if (document.getElementById("hidden").style.visibility === "visible") {
      document.getElementById("hidden").style.visibility = "hidden";
      document.getElementById("move").style.marginLeft = "59.8%";
      document.getElementById("visible-content").style.visibility = "visible";
    } else {
      document.getElementById("hidden").style.visibility = "visible";
      document.getElementById("move").style.marginLeft = "36.65%";
      document.getElementById("visible-content").style.visibility = "hidden";
    }
  }

  return (
    <>
      <Navbar />
      <div className="top_left_img">
        <img className="profile-img" src={bigProfileImg} alt="" />
      </div>

      <div className="top_mid_user-details">
        <div className="username_settings">
          {}
          <img
            onClick={() => {
              setOpenModal(true);
            }}
            className="settings_icon"
            src={settingsImg}
            alt=""
          />
        </div>
        <br />
        <div className="post_follower_following_counter">
          <div className="post-counter">0 posts</div>
          <div className="follower-counter">0 followers</div>;
          <div className="following-counter">0 following</div>
        </div>
        <div className="name_description">
          {users.map((user) => {
            return (
              <p key={v4()} className="name">
                {user.name}
              </p>
            );
          })}
          {users.map((user) => {
            return (
              <p key={v4()} className="description">
                {user.description}
              </p>
            );
          })}
        </div>
      </div>

      <div className="line1"></div>
      <br />
      <div className="line2" id="move"></div>

      <div className="nav2">
        <div className="nav2_post" onClick={hidden}>
          <div className="nav2_post-icon">
            <div className="box-1"></div>
            <div className="box-2"></div>
            <div className="box-3"></div>
            <div className="box-4"></div>
            <div className="box-5"></div>
            <div className="box-6"></div>
            <div className="box-7"></div>
            <div className="box-8"></div>
            <div className="box-9"></div>
          </div>
          POSTS
        </div>
        <div className="nav2_reels" onClick={hidden}>
          <img className="nav2_reels-icon" src={reelsImg} alt="" />
          REELS
        </div>
      </div>

      <div className="all_user_posts" id="hidden">
        <div className="post">
          <img className="post-1" src={dogPost1} alt="" />
        </div>
        <div className="post">
          <img className="post-2" src={dogPost2} alt="" />
        </div>
        <div className="post">
          <img className="post-3" src={dogPost3} alt="" />
        </div>
        <div className="post">
          <img className="post-4" src={dogPost4} alt="" />
        </div>
        <div className="post">
          <img className="post-5" src={dogPost5} alt="" />
        </div>
        <div className="post">
          <img className="post-6" src={dogPost6} alt="" />
        </div>
      </div>

      <div className="all_user_reels" id="visible-content">
        <img className="reels-icon-2" src={reelsImg} alt="" />
        <p> No reels has been uploaded here!</p>
      </div>

      {openModal && <Modal closeModal={setOpenModal} />}
    </>
  );
}

export default Profile;

In the error it is pointing out the onValue but i have used onValue in App.js also but it does not give me any error so what am i doing wrong here

What I have tried:

I have tried using get tried putting it in a function rather out alone but it gives does not resolve the error