I want to render some components conditionally so that Specifics component can be shown on specific page. I have added all components in LAYOUT.JS. Like HOME PAGE in which components are rendered. For example when I am on home page all component should be show, but when I navigate on login page only components to which I want to show, be show only that component.

const Layout = ({ children, title, description, keywords, author }) => {
  return (
    <div className="container-fluid">
      <Helmet>
        <meta charSet="utf-8" />
        <meta name="description" content={description} />
        <meta name="keywords" content={keywords} />
        <meta name="author" content={author} />
        <title>{title}</title>
      </Helmet>
      <Header />
      <main style={{ minHeight: "70px" }}>
        <Toaster />
        {children}
      </main>
      <Intro />

      <YTvedeo />
      <Footer />
      <Bottom />
    </div>
  );
};

Layout.defaultProps = {
  title: "Thebandwala - Book Best music Bands,Dhol",
  description: "Best service made for you",
  keywords: "music Band,Dhol,Ghodi",
  author: "Thebandwala",
};

export default Layout;