Issue with mdx file linting when upgrading prettier to 3.4.1

[merri-dei]

What version of eslint are you using?
v8.57.1

What version of prettier are you using?
v3.4.1

What version of eslint-plugin-prettier are you using?
v5.2.1

Please paste any applicable config files that you're using (e.g. .prettierrc or .eslintrc files)

// .prettierrc
{
    "semi": true,
    "tabWidth": 4,
    "printWidth": 100,
    "singleQuote": true,
    "trailingComma": "all",
    "bracketSameLine": true
}

// .eslintrc
module.exports = {
    root: true,
    env: {
        browser: true,
        node: true,
        es2020: true,
        jest: true,
    },
    parserOptions: {
        ecmaVersion: 2020,
        sourceType: 'module',
        ecmaFeatures: {
            jsx: true,
        },
    },
    ignorePatterns: ['node_modules/*', '.next/*', '.out/*', '!.prettierrc.js'],
    parser: '@typescript-eslint/parser',
    settings: {
        'import/resolver': {
            node: {
                extensions: ['.js', '.jsx', '.ts', '.tsx', '.mdx'],
                paths: ['src'],
            },
            typescript: true,
        },
        react: { version: 'detect' },
    },
    plugins: [
        '@typescript-eslint',
        'react',
        'simple-import-sort',
        'prettier',
        'testing-library',
        'jest-dom',
    ],
    extends: [
        'airbnb',
        'airbnb/hooks',
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended', // TypeScript rules
        'plugin:react/recommended', // React rules
        'plugin:react-hooks/recommended', // React hooks rules
        'plugin:jsx-a11y/recommended', // Accessibility rules
        'next/core-web-vitals', // Next.js rules
        'prettier',
        'plugin:prettier/recommended',
    ],
    overrides: [        
        {
            files: ['**/*.mdx'],
            extends: ['plugin:mdx/recommended'],
            settings: {
                'mdx/code-blocks': true,
            },
        },
    ],
    rules: {
        'prettier/prettier': ['error', {}, { usePrettierrc: true }],
    },
};

What source code are you linting?
We're linting an mdx file. Here's a sample snippet of the problematic markdown:

### Examples of pangrams

- The quick brown fox jumped over the lazy dog.
    
    <Image
        alt="Pangram example 1"
        height={932}
        sizes="(min-width: 1280px) 50vw, 100vw"
        src="/pangram-example-1.jpg"
        width={1915}
    />
    
- Sphinx of black quartz, judge my vows.
    
    <Image
        alt="Pangram example 2"
        height={932}
        sizes="(min-width: 1280px) 50vw, 100vw"
        src="/pangram-example-2.jpg"
        width={1915}
    />

What did you expect to happen?
The eslint plugin shouldn't raise an error with the <Image /> tag's spacing.

What actually happened?
The eslint plugin raises an error with the <Image /> tag's spacing like so:

I tried applying the suggested fix but it results to the ff:

I tried removing the spaces before the <Image /> tags like so:

But it resulted to the image no longer being a part of the list item and the list gets split into two, with one list for each list item.

This wasn't an issue with the prettier v3.3.3.