Solution 2

Example

The provider puts the user in context; Profile reads it directly; Layout and Sidebar have no props at all.

import { createContext, useContext } from 'react';

const UserContext = createContext(null);

function Profile() {
  const user = useContext(UserContext);
  return <p>👤 {user.name}</p>;
}
function Sidebar() {
  return <aside><Profile /></aside>;
}
function Layout() {
  return <div><Sidebar /></div>;
}

export default function App() {
  return (
    <UserContext.Provider value={{ name: 'Asha' }}>
      <Layout />
    </UserContext.Provider>
  );
}

Result