Why is my component not receiving data from another?

I have React Components:

My account.jsx

import "./myAccount.sass";
import { auth } from "../../firebaseConfig";
import {
  signOut,
  onAuthStateChanged,
} from "https://www.gstatic.com/firebasejs/9.6.0/firebase-auth.js";

import { useEffect, useState } from "react";
import { Hotel } from "../Hotel/Hotel";

function MyAccount(props) {
  const { isauth } = props;
  const { hotels = [] } = props;
  const [userEmail, setUserEmail] = useState([]);

  function logout() {
    signOut(auth);
    isauth(false);
    console.log("Successful logout");
  }

  function userInfo() {
    onAuthStateChanged(auth, (user) => {
      console.log(`user info: ${user.email}"`);
      setUserEmail(user.email);
    });
  }
  useEffect(() => {
    userInfo();
  }, []);
  return (
    <div>
      <h3>Hi, {userEmail}</h3>
      <button onClick={logout}>Logout...</button>
      <h4>Your reviews:</h4>
      <hr />
      <div className="Hotels">
        {hotels.map((hotel, id) => (
          <Hotel key={id} {...hotel} filter={true} user={userEmail} />
        ))}
      </div>
    </div>
  );
}

export default MyAccount;

Hotels.jsx

import starsMap from "../../starsMap";
import { useEffect, useState } from "react";
import "./hotel.sass";

function Hotel(props, filter = false, user = null) {
  const { name, img, localization, stars, review, author } = props;
  const [userEmail, setUserEmail] = useState(user);
  if (filter) {
    console.log(author, userEmail);
    if (author === user) {
      return (
        <div className="Hotel_card">
          <h2 className="Hotel_card-name">{name}</h2>
          <div className="Hotel_card_wrapper">
            <img className="Hotel_card-img" src={img} alt="hotel_img" />
            <h3 className="Hotel_card-localization">
              {/* Lat:{localization._lat}
              Long:{localization._lat} */}
              <button>Show on map</button>
            </h3>
            {starsMap.get(stars)}
          </div>
          <p className="Hotel_card-review">{review}</p>
          <h5 className="Hotel_card-author">Wroten by {author}</h5>
        </div>
      );
    }
  } else {
    return (
      <div className="Hotel_card">
        <h2 className="Hotel_card-name">{name}</h2>
        <div className="Hotel_card_wrapper">
          <img className="Hotel_card-img" src={img} alt="hotel_img" />
          <h3 className="Hotel_card-localization">
            {/* Lat:{localization._lat}
            Long:{localization._lat} */}
            <button>Show on map</button>
          </h3>
          {starsMap.get(stars)}
        </div>
        <p className="Hotel_card-review">{review}</p>
        <h5 className="Hotel_card-author">Wroten by {author}</h5>
      </div>
    );
  }
}

export { Hotel };

The MyAccount.jsx component passes two attributes to the Hotels.jsx component – filter={true} user={userEmail}.
Hotels.jsx only sees filter={true}, user remains null for it.
Question – why doesn’t Hotels.jsx see the user={userEmail} passed to it?

If you look at the state userEmail in MyAccount.jsx, then the desired value is found this way, but it is lost at the moment it is transferred to Hotels.jsx

>Solution :

It’s because you are using an intermediate useState in the Hotel.jsx file and you are not receiving correctly the props

const [userEmail, setUserEmail] = useState(user);

remove that line (it seems that you are not using it anyway) and change in the Hotels.jsx component the prop user to userEmail:

function Hotel({filter = false, userEmail = null, ...props})