Is there an existing issue for this?

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

Description Overview

I want to use the line-aligned value, but I don't think it works correctly if I have a props that has a hyphenated object.

Here's an example where I don't expect to see any errors:

<Box sx={{
	position: "relative",
	maxWidth: "720px",
	width: "100%",
	backgroundColor: "#26216d"
}}>
	{/* Content */}
</Box>

or

<Box sx={{
	position: "relative",
	maxWidth: "720px",
	width: "100%",
	backgroundColor: "#26216d"
}} />

I think it's because of multiline in props that I'm getting the error.

"react/jsx-closing-bracket-location": [ "error", { "nonEmpty": "line-aligned", "selfClosing": "line-aligned" } ]

Expected Behavior

I would like the code I have provided to work perfectly, for I believe this is the right way to go.

<Box sx={{
	position: "relative",
	maxWidth: "720px",
	width: "100%",
	backgroundColor: "#26216d"
}}>
	{/* Content */}
</Box>

or

<Box sx={{
	position: "relative",
	maxWidth: "720px",
	width: "100%",
	backgroundColor: "#26216d"
}} />

eslint-plugin-react version

^7.33.2

eslint version

^8.54.0

node version

v18.12.1