I have three components - layout, navigation, and room dropdown. Layout gets a property 'lobbyCode' from a database and sets it to a state, then passes it as a prop to Navigation. Navigation then passes this prop as a prop to RoomDropdown, however the room dropdown component does not re-render when the lobbyCode state is changed in layout. Navigation seems to handle the state change fine and re-renders correctly, so I'm not sure what's happening.

Layout:

const { user, isAuthenticated, isLoading } = useAuth0();
const [lobbyCode, setLobbyCode] = useState("");

return (
    <div>
       <Navigation GetUser={GetUser} GetPlayers={GetPlayers} lobbyCode={lobbyCode} user={user} 
       isAuthenticated={isAuthenticated} isLoading={isLoading} />
    </div>
  )

useEffect(() => {
    if (isAuthenticated) {
      GetUser(user.email).then(result => {
        if (result.length > 0) {
          setLobbyCode(result[0].lobby);
        }
      });
    }
  }, [user]);

Navigation:

<RoomDropdown lobbyCode={props.lobbyCode} GetUser={props.GetUser} GetPlayers={props.GetPlayers} user={props.user} />

RoomDropdown

useEffect(() => {
    console.log(props.lobbyCode);
}, [props.lobbyCode]);

The result is that the room dropdown will just print undefined and never update, even once the lobby code is loaded.