Hi, locally when I create a custom not-found.tsx all works well. But when I deploy it into Vercel sometimes basically just returns this error and doesnt render the actual 404 page.

The component is this one:

export default function Component() {
    return (
        <main
            key='1'
            className='min-h-screen bg-orange-100 flex items-center justify-center px-4 sm:px-6 lg:px-8'
        >
            <div className='max-w-md w-full space-y-8'>
                <div className='text-center'>
                    <h2 className='mt-6 text-3xl font-extrabold text-orange-900'>
                        404 No Encontrado
                    </h2>
                    <p className='mt-2 text-md text-orange-800'>
                        La página que buscas no esta disponible, pero puedes
                        acceder a la página de productos para que sigas
                        comprando.
                    </p>
                </div>
                <Button className='w-full bg-orange-800 text-white py-2 px-4 rounded mt-4'>
                    Ver Productos
                </Button>
            </div>
        </main>
    );
}

And I am using NextJs 14.0.4. Not sure if someone else faced this issue, thanks.