Passing state and props from parent to {children}

Question

How to pass states props to {children} with react in NextJs
Layout that has {children}, children are multiple pages with components needing the todo state from the layout.

import React, { useState } from 'react';

interface LayoutProps {
    children: React.ReactNode;
}

export default function Layout({ children }: LayoutProps) {
    const [todo, setTodo] = useState("Done");

    return (
        <main>{children}</main>
    );
}

interface Page1Props {
    todo: string;
}

export function Page1({ todo }: PageP1rops) {
    return (
        <>
            <Component1 src={todo} />
        </>
    );
}

    interface Page2Props {
    todo: string;
}

export function Page2({ todo }: Page2Props) {
    return (
        <>
            <Component2 src={todo} />
        </>
    );
}

Answer 1

Inside Parent return statement

 return(
    <Page1 todo={todo}/>
    <Page2 todo={todo}/>
    )