[Docs] jsx-sort-propts: replace ref string with ref variable

Author: Luccasoli

CHANGELOG.md

@@ -6,16 +6,22 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 ## Unreleased
 
 ### Fixed
-* [`jsx-key`]: avoid a crash with optional chaining ([#3371][], @ljharb)
+* [`jsx-key`]: avoid a crash with optional chaining ([#3371][] @ljharb)
+
+
+### Changed
+* [Docs] [`jsx-sort-propts`]: replace ref string with ref variable ([#3375][] @Luccasoli)
+
+[#3375]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3375
+[#3371]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3371
 
 ## [7.31.1] - 2022.08.26
 
 ### Fixed
 * [`jsx-key`]: fix detecting missing key in `Array.from`'s mapping function ([#3369][] @sjarva)
-* [`jsx-no-leaked-render`]: coerce strategy now allows a ternary ([#3370][], @sjarva)
+* [`jsx-no-leaked-render`]: coerce strategy now allows a ternary ([#3370][] @sjarva)
 
 [7.31.1]: https://github.com/jsx-eslint/eslint-plugin-react/compare/v7.31.0...v7.31.1
-[#3371]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3371
 [#3370]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3370
 [#3369]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3369
 

docs/rules/jsx-sort-props.md

@@ -125,8 +125,8 @@ This can be a boolean or an array option.
 When `reservedFirst` is defined, React reserved props (`children`, `dangerouslySetInnerHTML` - **only for DOM components**, `key`, and `ref`) must be listed before all other props, but still respecting the alphabetical order:
 
 ```jsx
-<Hello key={0} ref="John" name="John">
-  <div dangerouslySetInnerHTML={{__html: 'ESLint Plugin React!'}} ref="dangerDiv" />
+<Hello key={0} ref={johnRef} name="John">
+  <div dangerouslySetInnerHTML={{__html: 'ESLint Plugin React!'}} ref={dangerDivRef} />
 </Hello>
 ```
 
@@ -135,7 +135,7 @@ If given as an array, the array's values will override the default list of reser
 With `reservedFirst: ["key"]`, the following will **not** warn:
 
 ```jsx
-<Hello key={'uuid'} name="John" ref="ref" />
+<Hello key={'uuid'} name="John" ref={johnRef} />
 ```
 
 ### `locale`