How to create custom SelectField?

[AdamZajlerDDH]

I'm trying to create custom color picker; but I can't make it work :/ Can anyone help with Field?
I'm getting TypeError: Cannot read properties of undefined (reading 'replace') when Field is imported at selectColor.ts

selectColor.ts

import { SelectField, StaticLabel } from 'payload';
import { selectColors } from '@/config/payload/select-colors';

interface Props extends Pick<SelectField, 'required'> {
  nameOverride?: string;
  label?: StaticLabel;
}

export const selectColor = ({ nameOverride = 'backgroundColor', label, required }: Props): SelectField => {
  return {
    name: nameOverride,
    type: 'select',
    enumName: 'Color',
    admin: {
      components: {
        Field: '@/payload/components/select-color/server/Field#CustomSelectFieldServer',
        Label: {
          path: '@/payload/components/select-color/server/Label#CustomSelectFieldLabelServer',
          serverProps: {
            label:
              typeof label === 'string'
                ? label
                : {
                    en: 'Select background color',
                    pl: 'Wybierz kolor tła',
                    ...(label ? label : {}),
                  },
          },
        },
      },
    },
    options: selectColors.map((color) => ({
      value: `${color.split('#')[1]}`,
      label: `${color.split('#')[1]}`,
    })),
    required,
  };
};

Label.tsx

import type { SelectFieldLabelServerComponent } from 'payload';

import { FieldLabel } from '@payloadcms/ui';
import React from 'react';

export const CustomSelectFieldLabelServer: SelectFieldLabelServerComponent = ({ label }) => {
  return <FieldLabel label={label} />;
};

Field.tsx

import type { SelectFieldServerComponent } from 'payload';
import type React from 'react';

import { SelectField } from '@payloadcms/ui';
import { Stack } from '@mui/material';

export const CustomSelectFieldServer: SelectFieldServerComponent = ({ clientField }) => {
  return (
    <Stack className="field-type" direction="row" spacing={2}>
      <SelectField
        field={{
          ...clientField,
          // @ts-ignore
          options: clientField.options.map((option) => {
            const optionValue: string = typeof option === 'string' ? option : option.value;
            const optionParsed: string = `#${optionValue}`;

            return {
              value: optionValue,
              label: (
                <div style={{ display: 'flex', gap: '16px' }}>
                  {optionParsed.toUpperCase()}
                  <div style={{ width: '100px', backgroundColor: optionParsed, border: '1px solid black' }}></div>
                </div>
              ),
            };
          }),
        }}
      />
    </Stack>
  );
};

[alexfacciorusso]

The docs indeed lack of specific instructions on how to create custom fields and it gets frustrating for new users to understand how to do so in a platform-correct way. Can somebody answer please?