Solution 1

Example

Instead of passing data down, build the deep child at the top and pass it down as children.

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

export default function App() {
  const user = { name: 'Asha' };
  return (
    <Layout>
      <Sidebar>
        <Profile user={user} />
      </Sidebar>
    </Layout>
  );
}

Result