How to passing a value inside a component to pages index in nextjs

-component -> component1.ts

const [value,setValue] = useState("")
....
return (
 .. <div onClick= {()=>setValue("abc")}
)

I need the abc value here in the index in the pages

-component -> layout.ts

 <Fragment>
      <div>
      <Component1/>
      <div className="p-6"> <main>{props.children}</main></div>
       </div>   
      </div>
      <Footer />
  </Fragment>

I have a value in component1 I should see it in the index.

pages -> app.ts

type NextPageWithLayout = NextPage & {
  getLayout?: (
    page: ReactElement,
    pageProps: any //  Added this
  ) => ReactNode;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout
}

 function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  const getLayout = Component.getLayout ?? ((page:any) => page)

  return getLayout(
    <Component {...pageProps} />,
    pageProps //  Added this
  )
}

-pages -> index.ts

type Props = {
 
}
const Home = (props:Props) => {

  return (
    <div className=" ">  ????how to get "abc"
    </div>
  );
};
Home.getLayout = function getLayout(page: ReactElement, props: Props) {
  return <Layout >{page}</Layout>;
};
export default Home;