So, I have a simple Heading client component:

'use client';

import classNames from 'classnames';

/**
 *
 */
const Levels = {
  ONE: 1,
  TWO: 2,
  THREE: 3,
  FOUR: 4,
  FIVE: 5,
  SIX: 6
};

function Heading ({
  level,
  looks,
  className,
  children,
  ...other
}: HeadingProps) {
  const HeadingLevel = `h${level}`;

  return (
    <HeadingLevel {...other} className={classNames('heading', className, { [`h${looks}`]: looks })}>
      {children}
    </HeadingLevel>
  );
}

Heading.Levels = Levels;

export default Heading;

Then in a page I have:

<Heading level={Heading.Levels.ONE}>
  Some Header Here
</Heading>

and I am receiving this error:

TypeError: Cannot read properties of undefined (reading 'ONE')
at Home (./src/app/page.tsx:16:80)
at stringify (<anonymous>)
digest: "2456780610"
7 | return (
8 | #Unknown Channel
> 9 | <Heading level={Heading.Levels.ONE}>

What am I doing wrong?