Can't get slugs working like in the website example - "useField" error

I'm trying to create a new payload site from the empty template.

- added a Page collection

- created a /src/collections/Pages/index.ts

- copied the files /src/fields/slug/* form the website template

I am getting this error when trying to insert a page in the payload backend:

 ⨯ TypeError: Cannot destructure property 'config' of '(0 , _chunk_QPA2ZA5J_js__WEBPACK_IMPORTED_MODULE_11__.b)(...)' as it is undefined.
    at SlugComponent (src/fields/slug/SlugComponent.tsx:27:47)
  25 |     : checkboxFieldPathFromProps
  26 |
> 27 |   const { value, setValue } = useField<string>({ path: path || field.name })
     |                                               ^
  28 |
  29 |   const { dispatchFields } = useForm()
  30 | {
  digest: '1170859690'
}
 GET /admin/collections/pages/create 500 in 954ms
 GET /_next/static/chunks/app/(payload)/admin/%5B%5B...segments%5D%5D/chunk-OA4JPMVI.js.map 404 in 14ms

If I console log the path and field object, I get the same content as in the website example... I think I am missing something basic/obvious...

payload-types.ts

export interface Page {
  id: number;
  title: string;
  slug?: string | null;
  slugLock?: boolean | null;
  updatedAt: string;
  createdAt: string;
}

Page Collection

import { CollectionConfig } from 'payload'
import { slugField } from '@/fields/slug'

export const Pages: CollectionConfig<'pages'> = {
  slug: 'pages',
  fields: [
    {
      name: 'title',
      type: 'text',
      required: true,
    },
    ...slugField(),
  ],
}

the SlugComponent

...
  const checkboxFieldPath = path?.includes('.')
    ? `${path}.${checkboxFieldPathFromProps}`
    : checkboxFieldPathFromProps

  const { value, setValue } = useField<string>({ path: path || field.name })

  const { dispatchFields } = useForm()
...