i have a folder called users. In users folder i got 2 files and one of them is called layout.tsx. In layout.tsx file ive got this code:

import Sidebar from "@/app/components/sidebar/Sidebar";

export default async function UsersLayout({
  children
}: {
    children: React.ReactNode,
}) {

    return (
        <Sidebar>
            <div className="h-full">
                {children}
            </div>
        </Sidebar>
    )
};
-------------------------------------------------------------------------------------------------------------------------------------------
and the other file in users folder is called page.tsx it has this line of code:

const People = () => {
    return(
        <div className="hidden lg:block lg:pl-80 h-full border border-amber-400">
            <div
                className="
            px-4
            py-10
            sm:px-6
            lg:px-8
            lg:py-6
            h-full
            flex
            justify-center
            items-center
            bg-gray-100
            "
            >
                <div className="text-center items-center flex flex-col">
                    <h3 className="mt-2 text-2xl font-semibold text-gray-900">
                        Select a chat or start a new conversations
                    </h3>
                </div>
            </div>
        </div>
    );
}

export default People;

my question is how does "Select a chat or start a new conversations" be the child in UsersLayout when it has no connection to layout.tsx. And second question, children will be rendered inside of Sidebar?