Next.JS / Ant Design - Element type is invalid

I've been trying to use antd's Typography library, but I'm getting a Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. message when attempting to import the Title component. Does anyone know what I could be doing wrong? This is antd version 5.25.3 and next.js 15.3.2.

import Link from 'next/link';
import { Typography } from 'antd';
const { Title } = Typography;

export default function Header() {
  return (
    <div>
      <Title level={1}>
        <Link href='/'>Test</Link>
      </Title>
    </div>
  );
}

Use this instead of your codes.

'use client';

import Link from 'next/link';
import { Typography } from 'antd';
const { Title } = Typography;

export default function Header() {
  return (
    <div>
      <Title level={1}>
        <Link href='/'>Test</Link>
      </Title>
    </div>
  );
}

And in app/layout.tsx or global.css, add:

import 'antd/dist/reset.css';