How to pass props to {props.children} in NextJS, Reactjs

Question

I have an issue to pass props from the parent component into my children components, ok let see the code below

import { useState } from "react";
import { createGlobalStyle } from "styled-components";
import Footer from "./Footer";
import Nav from "./Nav";

const GlobalStyle: any = createGlobalStyle`
    body {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        font-family: 'Comic sans MS'
    }
`;

export default function Layout(props) {
    let [pages, setPages] = useState(null) //1. the props i want to pass
    const Children = props.children
    return (
        <>
            <GlobalStyle />
            <Nav />
            {Children} {/*2.the target*/}
            <Footer />
        </>
    )
}

The code above is saved as Layout.tsx, I wanted to pass let [pages, setPages] = useState(null) into {Children} . And i call the Layout component in _app.tsx below

import Router from 'next/router';
import Layout from '../components/Layout';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

Router.events.on('routeChangeStart', () => NProgress.start());
Router.events.on('routeChangeComplete', () => NProgress.done());
Router.events.on('routeChangeError', () => NProgress.done());

export default function MyApp({ Component, pageProps }) {
    return (
        <Layout>
            <Component {...pageProps} />
        </Layout>
    )
}

The target children is my index pages named index.tsx, and i can't find a way to pass the props into it, below is my directory tree

|- components
|  |- Layout.tsx
|
|- pages
|  |- _app.tsx
|  |- index.tsx

maybe anyone can help my issue here, thanks

Answer 1

finally i create state on _app.tsx and pass it to index.tsx and layout.tsx so i can access the value from both.