docs: update configurations documentation

Author: Rel1cx

website/pages/docs/configurations.mdx

@@ -12,6 +12,16 @@ ESLint React provides the following configurations:
 
 React version to use, `"detect"` means auto detect React version from the project's dependencies.
 
+### `importSource`
+
+(type: `string`, default: `"react"`)
+
+The source where React is imported from.\
+This allows to specify a custom import location for React when not using the official distribution.\
+If `importSource` is specified, an equivalent version of React should be provided to the [`version`](#version) setting.
+
+(e.g. `@pika/react`, etc)
+
 ### `polymorphicPropName`
 
 (type: `string`)
@@ -24,37 +34,39 @@ For example, if you set the `polymorphicPropName` setting to `as` then this elem
 
 will be evaluated as an `h3`. If no `polymorphicPropName` is set, then the component will be evaluated as `Box`.
 
-### `additionalHooks`
+### `additionalComponents`
 
-(type: `[key: string]: string[]`)
+(type: `{ name: string; as: string; attributes: { name: string; as?: string; defaultValue?: string }[] }[]`)
 
-<Callout type="warning">This is intended to cover edge cases. We suggest to use this option very sparingly, if at all.</Callout>
+<Callout type="info">Before using `additionalComponents`, consider whether `polymorphicPropName` can be used instead, as it simpler and more efficient.</Callout>
 
-A object of aliases for React built-in hooks. ESLint React will recognize these aliases as equivalent to the built-in hooks in all its rules.
+<Callout type="warning">This is an experimental feature that can be unstable and lacks documentation.</Callout>
 
-(e.g. `{ useLayoutEffect: ["useIsomorphicLayoutEffect"] }`)
+An array of components and its attributes mapping. It allows the related rules to do even more comprehensive analysis. You can also provide default values for attributes here, that will be used when that attribute is not present in the component.
 
-### `additionalComponents`
+For example, if you set the `additionalComponents` to `[{ name: "EmbedContent", as: "iframe", attributes: [{ name: "sandbox", defaultValue: "" }] }]` then this element:
 
-(type: `{ name: string; as: string; attributes: { name: string; as?: string; defaultValue?: string }[] }[]`)
+`<EmbedContent src="https://eslint-react.xyz" />`
 
-<Callout type="info">Before using `additionalComponents`, consider whether `polymorphicPropName` can be used instead, as it simpler and more efficient.</Callout>
+will be evaluated as an `<iframe src="https://eslint-react.xyz" sandbox="" />`
 
-<Callout type="warning">This is an experimental feature that can be unstable and lacks documentation.</Callout>
+So that both the `dom/no-missing-iframe-sandbox` and `dom/no-unsafe-iframe-sandbox` rules can perform checks on it.
 
-An array of components and its attributes mapping. It allows the related rules to do even more comprehensive analysis on them than just using the `polymorphicPropName` setting. You can also provide default values for attributes here, that will be used when that attribute is not present in the component.
+### `additionalHooks`
 
-(e.g. The `[{ name: "EmbedContent", as: "iframe", attributes: [{ name: "sandbox", defaultValue: "" }] }]` demystifies an `<EmbedContent src="https://eslint-react.xyz" />` as an `<iframe src="https://eslint-react.xyz" sandbox="" />`, so that both the `dom/no-missing-iframe-sandbox` and `dom/no-unsafe-iframe-sandbox` rules can perform checks on it)
+(type: `[key: string]: string[]`)
 
-### `importSource`
+<Callout type="warning">This is intended to cover edge cases. We suggest to use this option very sparingly, if at all.</Callout>
 
-(type: `string`, default: `"react"`)
+A object of aliases for React built-in hooks. ESLint React will recognize these aliases as equivalent to the built-in hooks in all its rules.
 
-The source where React is imported from.\
-This allows to specify a custom import location for React when not using the official distribution.\
-If `importSource` is specified, an equivalent version of React should be provided to the [`version`](#version) setting.
+For example, if you set the `additionalHooks` to `{ useLayoutEffect: ["useIsomorphicLayoutEffect"] }` then the React Hook in this code:
 
-(e.g. `@pika/react`, etc)
+`useIsomorphicLayoutEffect(() => { setCount(count + 1); }, [count]);`
+
+will be evaluated as a `useLayoutEffect` hook
+
+So that the `hooks-extra/no-direct-set-state-in-use-layout-effect` rule can perform checks on it.
 
 ## Examples