Docs: Clarify locale precedence when using PrimeReactProvider (#8453)

Author: Coderxrohan

components/doc/configuration/locale/setuplocaledoc.js

@@ -4,7 +4,7 @@ import { DocSectionText } from '@/components/doc/common/docsectiontext';
 export function SetupLocaleDoc(props) {
     const code = {
         basic: `
-//_app.js
+// _app.js
 import { PrimeReactProvider } from 'primereact/api';
 
 export default function MyApp({ Component }) {
@@ -15,7 +15,7 @@ export default function MyApp({ Component }) {
 
     return (
         <PrimeReactProvider value={value}>
-            <App />
+            <Component />
         </PrimeReactProvider>
     );
 }
@@ -26,9 +26,35 @@ export default function MyApp({ Component }) {
         <>
             <DocSectionText {...props}>
                 <p>
-                    To establish the default locale for your entire application, you can utilize the <i>PrimeReactProvider</i>.
+                    To establish the default locale for your entire application, you can utilize the
+                    <i> PrimeReactProvider</i>.
+                </p>
+
+                <p>
+                    When <b>PrimeReactProvider</b> is used, it becomes the primary source of locale configuration for all PrimeReact components.
+                </p>
+
+                <h5>Locale Precedence</h5>
+                <p>Locale resolution follows the order below:</p>
+                <ul>
+                    <li>
+                        <code>locale</code> prop defined on a component
+                    </li>
+                    <li>
+                        <code>PrimeReactProvider</code> (<code>context.locale</code>)
+                    </li>
+                    <li>
+                        Global <code>PrimeReact.locale</code> set via <code>locale()</code>
+                    </li>
+                    <li>Browser locale</li>
+                </ul>
+
+                <p>
+                    This means that once <b>PrimeReactProvider</b> is present, calling
+                    <code> locale()</code> alone is not sufficient. The locale must be provided explicitly through the provider.
                 </p>
             </DocSectionText>
+
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );