How to Access and Render ‘summary’ Array from an Async Function in a Next.js Component

Please, how can I get summaryfrom inside async fetchData to be exported to Layout? (knowing that summary is 5-elements array)

import { useRouter } from "next/router";
import Layout from '../../components/layoyt';
import Campaign from '../../components/campaign';

const Post = () => {
    const router = useRouter();
    const { address } = router.query;
    const campaign = Campaign(address);

    const fetchData = async () => {
        try {
            const summary = await campaign.methods.getSummary().call();
            // Handle the summary data here
            console.log(summary);
        } catch (error) {
            // Handle any errors that may occur during the API call
            console.error(error);
        }
    }
    fetchData();

    return (
        <Layout>
            <p>Post : {address}</p>
            {summary[0]}
        </Layout>
    )
}

export default Post;