Custom Component in a collection hooked to afterList is being rendered on too many pages

[fofoy]

Link to reproduction

No response

Environment Info

Binaries:
  Node: 20.12.2
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: 9.6.0
Relevant Packages:
  payload: 3.0.0-beta.107
Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Fri Mar 29 23:14:13 UTC 2024
  Available memory (MB): 11967
  Available CPU cores: 8

Describe the Bug

I'm displaying a custom component on the afterList mount point like so :

import { CollectionGroup } from './groups'

export const Brands: CollectionConfig = {
    slug: 'brands',
    admin: {
        useAsTitle: 'title',
        group: CollectionGroup.SEOContent,
        components: {
            afterList: ['src/components/brands/CheckBrands'],
        },
    },
    access: {
        read: () => true,
    },
    fields: [
        {
            name: 'title',
            type: 'text',
            required: true,
        },
        {
            name: 'slug',
            type: 'text',
            required: true,
            unique: true,
        },
    ],
}

This component works as expected but I noticed it is being instantiated (with console.log(), but not displayed) on other pages as the Dashboard or in a form where I use a relationship field in relation to this particular Brands Collection.

Reproduction Steps

• Hook a Custom Component to the afterList hook (I didn't check for any other mounting point)
• Add a console.log('custom component init') to the Custom Component
• Navigate to several pages and notice the console log being called in the server console in pages where it's bit supposed to be rendered

Adapters and Plugins

No response