I have this not found page: (Like on https://next-intl-docs.vercel.app/docs/environments/error-files)

import Button from "@/components/buttons/button";
import { useTranslations } from 'next-intl';
import Image from "next/image";

/**
 * 404 Error Page
 * @returns React Node
 */
export default async function NotFound() {
    // Get the translations
    const t = useTranslations('not-found');

    return (
        <div className="w-screen h-screen grid place-items-center">
            <div className="-translate-y-6">
                <Image
                    className="w-80"
                    src="/assets/images/cubes.svg"
                    width={559}
                    height={513}
                    alt={t('images.cubes')}
                />
                <h1 className="text-8xl w-[1000px] my-10">
                    {t('headings.not-found')}
                </h1>
                <Button onClick="/" background="yellow">
                    <h1 className="mt-1">{t('buttons.home')}</h1>
                </Button>
            </div>
        </div>
    );
}

But i get the error "Error: Objects are not valid as a React child (found: object with keys {$$typeof, _payload, _init}). If you meant to render a collection of children, use an array instead."
I verified i get the same error when i remove the translations and write plain text.
The weird thing is, if i remove my framer-motion animatepresence from my layout, i get the error "Error: Expected a suspended thenable. This is a bug in React. Please file an issue."