`prefer-immutable-types` documentation - Add an example for how to configure the rule for React/JSX

[Sweater-Baron]

Suggestion

I'd love to use the prefer-immutable-types rule in my React project, but from the documentation of the options for that rule, I can't figure out how to configure it to ignore React component types.

React is a pretty common use case for TypeScript projects, so I'm sure people would find it helpful for the rule's documentation to have some guidance on how to get it working with React.

For something like

import type { FC } from 'react';

export const MyComponent: FC = () => <div />;

the rule triggers both on the assignment to MyComponent, and on the return type of MyComponent. Disabling the rule on the FC assignment was straightforward to figure out from the documentation. But I can't figure out how to disable it for the return type of the component (which is JSX.Element from react). The functional/prefer-immutable-types rule complains: Return type should have an immutability of at least "Immutable" (actual: "Mutable").

I figured something like one of these would work, but clearly I'm missing something:

'functional/prefer-immutable-types': [
  'error',
  {
    overrides: [{
      specifiers: [
        {
          // This one works to prevent the rule from triggering for the assignment of the component
          // itself, which is typed as FC:
          from: 'package',
          package: 'react',
          name: 'FC',
        },
        {
          from: 'package',
          package: 'react',
          name: 'FunctionComponent',
        },
        {
          from: 'package',
          package: 'react',
          name: 'ReactNode',
        },
        {
          // JSX.Element extends React.ReactElement, which is also exported directly from 'react', but alas,
          // this one doesn't prevent the rule from triggering on the return type of the component,
          // which is JSX.Element:
          from: 'package',
          package: 'react',
          name: 'ReactElement',
        },
        // None of the below work for stopping the rule from triggering on the
        // return type of the component:
        {
          from: 'package',
          package: 'react',
          name: 'JSX.Element',
        },
        {
          from: 'package',
          package: 'react/JSX',
          name: 'Element',
        },
        {
          from: 'package',
          package: 'react.JSX',
          name: 'Element',
        },
        {
          from: 'package',
          package: 'react',
          name: 'Element',
        },
        {
          from: 'package',
          package: 'react/jsx-runtime',
          name: 'JSX.Element',
        },
        {
          from: 'package',
          package: 'react/jsx-runtime/JSX',
          name: 'Element',
        },
        {
          from: 'package',
          package: 'react/jsx-runtime.JSX',
          name: 'Element',
        },
        {
          from: 'package',
          package: 'react/jsx-runtime',
          name: 'Element',
        },
      ],
      disable: true,
    }],
  },
],

(Also, small documentation bug: it says match is be field name for the overrides, but it seems like this should be specifiers)