react/jsx-curly-spacing "never" + Prettier - Incorrect removal of parentheses around multiline JSX

UPDATE - Issue resolved

IMO this is not clear in the docs at all, but a second prettier extends was needed:

extends: [
    'airbnb',
    'plugin:fetch/recommended',
    'plugin:prettier/recommended',
    'prettier/react',  // THIS OVERRIDES SPECIFIC REACT RULES THAT CONFLICT WITH PRETTIER
  ],

Issue

The error I’m encountering only manifests when the following react rule is enabled:

'react/jsx-curly-spacing': ['error', 'never', { allowMultiline: true }],

The playground below shows Prettier by itself formatting correctly. When the above react rule is added, the error presents itself.

Prettier 1.16.4 Playground link

--jsx-bracket-same-line
--parser babel

➡️ Input:

function App() {
  return (
    <div
      className="flex"
      activator={ (
        <div>
          my really long divvvvvvvvvvvvvvvvvvvv
          <span>some child</span>
        </div>
      ) }>
      My app
    </div>
  );
}

❌ Output (with react/jsx-curly-spacing “never”): Opening paren remains, causing compile error

function App() {
  return (
    <div
      className="flex"
      activator={(
        <div>
          my really long divvvvvvvvvvvvvvvvvvvv
          <span>some child</span>
        </div>
      }
    >
      My app
    </div>
  );
}

✅ Output (with react/jsx-curly-spacing “always”):

function App() {
  return (
    <div
      className="flex"
      activator={
        <div>
          my really long divvvvvvvvvvvvvvvvvvvv
          <span>some child</span>
        </div>
      }>
      My app
    </div>
  );
}

Expected behavior:

With the react/jsx-curly-spacing “never” setting, the parentheses should be removed correctly, as seen in the 2nd ✅ output example.

Here is a GIF to show this as well:

ESLint Config

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: [
    'plugin:react/recommended',
    'plugin:prettier/recommended'
  ],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly'

  },
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  plugins: [
    'react',
    'prettier'
  ],
  rules: {
    'react/jsx-curly-spacing': ['error', 'never', { allowMultiline: true }],  // ERROR
    'react/jsx-curly-spacing': ['error', 'always', { allowMultiline: true }],  // OK
    'prettier/prettier': 'error'
  },
};

[jamesopti]

UPDATE: IMO this is not clear in the docs at all, but a second prettier extends was needed:

extends: [
    'airbnb',
    'plugin:fetch/recommended',
    'plugin:prettier/recommended',
    'prettier/react',  // THIS OVERRIDES SPECIFIC REACT RULES THAT CONFLICT WITH PRETTIER
  ],

[brodybits]

I think someone should raise a PR to clarify this (docs page has an edit button).