Payload CMS Font Awesome Select Field

FontAwesome.ts

import { Field } from 'payload';

export const FontAwesomeField: Field = {
    name: 'fontAwesomeIcon',
    label: 'Icon',
    type: 'text',
    validate: (value) => {
        if (!value) {
            return 'Please select an icon';
        }
        return true;
    },
    admin: {
        components: {
            Field: '@/components/payload/FontAwesome#Select',
        },
    },
    required: true,
    hasMany: false,
    localized: false,
};

FontAwesome.tsx

'use client';

import * as React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
    IconName,
    IconPrefix,
    IconProp,
} from '@fortawesome/fontawesome-svg-core';
import { SelectInput, useField, FieldLabel } from '@payloadcms/ui';
import { OptionObject } from 'payload';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';

library.add(fas, fab);

export const fontAwesomeIconOptions = () => {
    const options: OptionObject[] = [];
    [fas, fab].forEach((iconPack) => {
        Object.keys(iconPack).forEach((icon) => {
            options.push({
                label: icon,
                value: iconPack[icon].prefix + '/' + iconPack[icon].iconName,
            });
        });
    });

    return options;
};

type FontAwesomeSelectComponentProps = {
    path: string;
};

export const Select: React.FC<FontAwesomeSelectComponentProps> = ({ path }) => {
    const { value, setValue } = useField<string>({ path });

    let icon: IconProp = { prefix: 'fas', iconName: 'question' };
    if (value) {
        icon = value.split('/') as [IconPrefix, IconName];
    }

    return (
        <div>
            <SelectInput
                path={path}
                name={path}
                value={value}
                required={true}
                label={'Icon'}
                description={
                    'You can find all icons on the page https://fontawesome.com/icons'
                }
                hasMany={false}
                options={fontAwesomeIconOptions()}
                onChange={(e) => {
                    setValue(e?.value);
                }}
            />
            {value && icon && (
                <span>
                    Icon Preview: <FontAwesomeIcon icon={icon} />
                </span>
            )}
        </div>
    );
};

Hmm. When i put this into action, after starting the application, tons of code runs through my console and this message appears at the end:

The export groupHasName was not found in module [project]/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/payload/dist/exports/shared.js [app-client] (ecmascript) <exports>.
Did you mean to import tabHasName?
All exports of the module are statically known (It doesn't have dynamic exports). So it's known statically that the requested export doesn't exist.

No clue what this means. Regenerated importMaps without success.