[Bug]: `react/jsx-sort-props` causes errors when an inline comment follows a JSX prop

[hamirmahal]

Is there an existing issue for this?

• [x] I have searched the existing issues and my issue is unique
• [x] My issue appears in the command-line and not only in the text editor

Description Overview

Reproduction:

const ProblematicComponent: React.FC = () => {
	return (
		<div
			onClick={() => console.log()} // Comment
			className={'flex'}>
			<span>Problematic Component</span>
		</div>
	)
}

Actual behavior:

• eslint updates the file to

const ProblematicComponent: React.FC = () => {
	return (
		<div
			className={'flex'}
			onClick={() => console.log()} // Comment>
			<span>Problematic Component</span>
		</div>
	)
}

export default ProblematicComponent

and multiple errors pop up, like

JSX expressions must have one parent element. ts (2657)

and

Parsing error: Identifier expected. eslint

ESLint config:

{
  "plugins": ["react"],
  "rules": {
    "react/jsx-sort-props": ["error"]
  }
}

Expected Behavior

Expected behavior:

• No autofix corruption or mis-sorting.
• Comment should remain properly attached to onClick.

eslint-plugin-react version

^7.34.2

eslint version

^8.40.0

node version

v22.16.0