Custom props not showing up

I am extending react-select to, and noticed an issue that my custom props are not being passed to the base components

<components.Placeholder {...props} cy-id="select-placeholder" data-john={"cena"}
>

Renders as:

Here is my implementation:

Custom component:

import {
 components,
} from 'react-select';

function PlaceholderSimple<O extends IOption, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>({
  children,
  ...props
}: PlaceholderProps<O, M, G> & { icon?: LucideIcon }) {
  return (
    <components.Placeholder {...props} cy-id={'select-placeholder'}>
      <div className={'flex items-center gap-2'}>
        <span className='truncate'>{children}</span>
      </div>
    </components.Placeholder>
  );
}

Select

function Select<O extends IOption, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>({
  classNames,
  isMulti,
  isClearable = false,
  isSearchable = false,
  components,
  ...props
}: Props<O, M, G> & { showClearWhenDisabled?: boolean }) {
  return (
    <ReactSelect
      isSearchable={isSearchable}
      isClearable={isClearable}
      blurInputOnSelect
      {...props}
      classNames={...}

      components={{
        Placeholder: PlaceholderSimple, // Custom/default placeholder component
        ...components,
      }}

    />
  );
}

The idea is to have some extra "control data" for those components. From what I’ve been able to observe and analyze, there doesn’t seem to be a way to customize the props sent to the component, and if sent, they are ignored.

If there is no simple way to achieve this, I will temporarily wrap everything inside a div (not ideal, as it will break all my styles) waiting for a better solution.

Suggestion: One way to achieve this could be either directly through the component or via a property on the Select that allows passing props to each individual component, similar to how it’s done with classNames and components, and don't vanish with those custom props

Start by tracing the custom Placeholder and ReactSelect components handling described in the issue, focusing on where cy-id and data-john are dropped. Done means a supported way to pass per-component control data preserves those custom props on the base component without breaking the existing components API.