Next 13 throwing error on tRPC client promise

Question

I know Next 13 is only in beta, but recently I started experimenting with tRPC and Next's data fetching. I have a server component that queries projects.getAll from my tRPC server and puts them in a Component. Server Error

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead. Code:

const fetchProjects = async () => {
    const data = await trpcClient.projects.getAll.query();
    return data;
};

const PortfolioSection = async () => {
    const getAllData = await fetchProjects();

    console.log(getAllData);
    
    return (
        <section id='portfolio' className='min-h-screen py-5'>
            <h1 className='text-4xl font-semibold mb-5'>Portfolio</h1>
            <div style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
                gridGap: '16px',
            }}>
                {
                    getAllData &&
                    getAllData?.data?.map(({attributes}: any, projIdx: any) => (
                        <div className='bg-white p-4' key={projIdx}>
                            <div className='w-full h-32 relative'>
                                <Image
                                    className='object-cover'
                                    src={env.NEXT_PUBLIC_STRAPI_URI + attributes.thumbnail.data.attributes.formats.small.url}
                                    alt='Project thumbnail'
                                    fill />
                            </div>
                            <div className='px-4 pt-2'>
                                <div className='flex gap-2 my-3'>
                                    {(attributes.tags as string).split(',').map((tag, tagIdx) => (
                                        <span
                                            key={tagIdx}
                                            className='rounded-full px-3 py-1 text-sm font-semibold text-gray-700'
                                            style={{background: `#${tag.split('#')[1]}`}}>
                                            {tag.split('#')[0]}
                                        </span>
                                    ))}
                                </div>
                                <h2 className='text-xl font-semibold text-gray-800'>{attributes.title}</h2>
                                <p className='text-gray-700'>
                                    {attributes.blog_post.data.attributes.short}
                                </p>
                                <div className='flex gap-2 my-3'>
                                    {
                                        attributes.links.split(', ').map((link: any, linkIdx: any) => {
                                            const [type, href] = link.match(/(?<=\[).+(?=\))/)[0].split('](');
                                            return <Link
                                                key={linkIdx}
                                                href={href}
                                                className='bg-gray-200 px-3 py-1 text-sm font-semibold text-gray-700'
                                                target='_blank'
                                                data-hover>
                                                {
                                                    (() => {
                                                        switch(type) {
                                                        case 'github':
                                                            return <LogoGithub />;
                                                        case 'website':
                                                            return <ContentView />;
                                                        default:
                                                            return <LinkIcon />;
                                                        }
                                                    })()
                                                }
                                            </Link>;
                                        })
                                    }
                                </div>
                            </div>
                        </div>
                    )) || <></>
                }
            </div>
        </section>
    );
};

The error message:

Server Error

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

P.S. This example does work with the regular tRPC hooks