react/prop-types emits warning for inline components

[adnasa]

Hey.
I attempted to upgrade eslint-plugin-react in my repo from v7.20.6 to v7.21.2,
and react/prop-types rule emits warnings.

Actual source code (simplest case)

const SelectField = (props) => (
  <div className={styles['select-wrapper']}>
    <SelectInput
      id={props.id}
      name={props.name}
      value={props.quantity}
      options={quantityOptions}
      onChange={handleSelectChange}
      components={{
        // eslint-disable-next-line react/display-name
        Option: (optionProps) => (
          <React.Fragment>
            {optionProps.value === `${props.maxSelectableValue}` && (
              <span className={styles.separator} />
            )}
            <SelectInput.Option {...optionProps} />
          </React.Fragment>
        ),
      }}
      menuPortalTarget={document.body}
      menuPortalZIndex={props.menuPortalZIndex}
      data-testid="quantity-selector-select-input"
    />
  </div>
)
SelectField.displayName = 'SelectField'
SelectField.propTypes = {
  id: PropTypes.string,
  name: PropTypes.string,
  onChange: PropTypes.func.isRequired,
  quantity: PropTypes.string,
  menuPortalZIndex: PropTypes.number,
  maxSelectableValue: PropTypes.number.isRequired,
}

In the example above, optionProps.value === props.maxSelectableValue emits a react/prop-types warning,
although a prop-type validation was defined for maxSelectableValue.

I'm not sure if I should file this as a bug. I was looking through the changelogs and previous PR and discussions up to v7.21.2 and couldn't find hints as to how I can migrate this. I welcome suggestions, clarity if this is be design and what I can do next.

What I expected

react/prop-types to not emit warning for props.maxSelectableValue for the case above.

context information:

SelectInput is a component of an external library that I import. It wraps react-select

configuration

base configuration

module.exports = {
  extends: [
    '@commercetools-frontend/eslint-config-mc-app',
    'plugin:testing-library/react',
  ],
  plugins: ['graphql', 'react-hooks'],
  rules: {
    'max-classes-per-file': 0,
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
    'jest/expect-expect': 'off',
    'testing-library/prefer-presence-queries': 'error',
    'testing-library/await-async-query': 'error',
    'jest-dom/prefer-enabled-disabled': 'warn',
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
}

Note that the config for @commercetools-frontend/eslint-config-nc-app can be found here

---

off topic:
Regarding react/display-name, I stumbled on cases where disabling it still emits warnings (not in this scenario)
I'll create a different issue for that, if I can't resolve it

[ljharb]

Fixed in #2807, per #2807 (comment).