I am working on a personal project to learn react and come to a problem. I’ve fetched data from WebApi and having trouble to extract information to pass as props into react router component and homepage component.
This is my App.js

import React from 'react';
    import Layout from './components/pages/Laypout.js';
    import About from './components/pages/About.js';
    import ErrorPage from './components/pages/error-page.js';
    import Contact from './components/pages/Contact.js';
    import Support from './components/pages/Support.js';
    import Home from './components/Home.js';
    import { useEffect, useState } from "react";
    import {
    createBrowserRouter,
    RouterProvider,
   } from "react-router-dom";

   const CompanyID = "Demo";


   const apiURL = `http://localhost:58407/api/Demo`

   function App() {
    //fetching data from API
    const [contents, setContents] = useState([]);
    const [isLoading, setisLoading] = useState(false);
    const [error, setError] = useState();

    const fetchContents = async () => {
    try {
      setisLoading(true);
      const response = await fetch(apiURL);
      const jsonData = await response.json();
      setContents(jsonData)
      //console.log(jsonData)
      if (!response.ok) {
        throw new Error(jsonData.message)
      }
    } catch (err) {
      setError(err)
    } finally {
      setisLoading(false);
    }
    }

    useEffect(() => {
    fetchContents();
    }, []);

    if (isLoading) {
    return <div>Loading...</div>
    }
     if (error) {
      return <div>Something went wrong, please try again</div>
      }
  
    const contentItems = contents.map((content) => {
    
    console.log(content)
    return <div key={content.PageID}>
      {content.PageTitle}
      {content.PageText}
      {content.Message}
      .......etc //other fields
    </div>
    });

    console.log(contentItems)
    const router = createBrowserRouter([
    {
      path: "/",
      element: <Home />,
      errorElement: <ErrorPage />,
    },
    {
      path: "/",
      element: <Layout />,
      //errorElement: <ErrorPage />,
      children: [
        {
          path: "/about",
          element: <About title={contentItems}/>,     //want to pass here only Aboutus Page title and contents
        },
        {
          path: "/contact",
          element: <Contact />,       //same like aboutus
        },
        {
          path: "/support",
          element: <Support />,      //same as above
        }
      ]
    },
    ]);

    return (
    <RouterProvider router={router} />
    );
    }
    export default App;

This is About component

export default function About(props) {
  
    return (
        <div className="container">
            <h1>{props.title}</h1>
            <p>{props.text}<h1>
        </div>
    )
    }

This is homepage component

import HelpDesk from './HelpDesk.js';
import Category from './Category.js';
import MiddleContactUs from './MiddleContactUs.js';
import Faqs from './Faqs.js';
import BottomMessage from './BottomMessage.js';
import Footer from './Footer.js';
import Navbar from './Navbar.js';
import HeaderBanner from './HeaderBanner.js';

    export default function Home() {

    return (
        <>
            <div className="header">
                <Navbar  />
                <HeaderBanner />
            </div>
            <Category />
            <Faqs faq={props.faqs}/>
            <BottomMessage message={props.msg}/>
            <Footer msg={props.message}/>
        </>
    )
    }

This is data fetched from API from which I want to extract data like PageTitle, PageText, Heading, Footer message etc so I can pass them as props wherever I need.

{PageTitle: 'Aboutus', PageText: 'Page content text here', ContentID: 5, Heading: 'Aboutus Page', FooterMessage: 'Welcome to Demo', BottomMsg: 'This is test'}
{PageTitle: 'Contactus', PageText: 'Page content text here', ContentID: 5, Heading: 'Contactus Page', FooterMessage: 'Welcome to Demo', BottomMsg: 'This is test'}
{PageTitle: 'Support', PageText: 'Page content text here', ContentID: 5, Heading: 'Support Page', FooterMessage: 'Welcome to Demo', BottomMsg: 'This is test'}

So I need to know how should I pass props in About us, contact us page which are under react router and then other props in homepage which has multiple nested small component itself.