docs: fix links to react hooks (#11344)

Author: r1tsuu

docs/custom-components/overview.mdx

@@ -276,7 +276,7 @@ export default async function MyServerComponent({
 
 But, the Payload Config is [non-serializable](https://react.dev/reference/rsc/use-client#serializable-types) by design. It is full of custom validation functions and more. This means that the Payload Config, in its entirety, cannot be passed directly to Client Components.
 
-For this reason, Payload creates a Client Config and passes it into the Config Provider. This is a serializable version of the Payload Config that can be accessed from any Client Component via the [`useConfig`](../admin/hooks#useconfig) hook:
+For this reason, Payload creates a Client Config and passes it into the Config Provider. This is a serializable version of the Payload Config that can be accessed from any Client Component via the [`useConfig`](../admin/react-hooks#useconfig) hook:
 
 ```tsx
 'use client'
@@ -375,7 +375,7 @@ export function MyClientComponent() {
 ```
 
 <Banner type="success">
-  See the [Hooks](../admin/hooks) documentation for a full list of available hooks.
+  See the [Hooks](../admin/react-hooks) documentation for a full list of available hooks.
 </Banner>
 
 ### Getting the Current Locale
@@ -422,12 +422,12 @@ function Greeting() {
 ```
 
 <Banner type="success">
-  See the [Hooks](../admin/hooks) documentation for a full list of available hooks.
+  See the [Hooks](../admin/react-hooks) documentation for a full list of available hooks.
 </Banner>
 
 ### Using Hooks
 
-To make it easier to [build your Custom Components](#building-custom-components), you can use [Payload's built-in React Hooks](../admin/hooks) in any Client Component. For example, you might want to interact with one of Payload's many React Contexts. To do this, you can use one of the many hooks available depending on your needs.
+To make it easier to [build your Custom Components](#building-custom-components), you can use [Payload's built-in React Hooks](../admin/react-hooks) in any Client Component. For example, you might want to interact with one of Payload's many React Contexts. To do this, you can use one of the many hooks available depending on your needs.
 
 ```tsx
 'use client'
@@ -444,7 +444,7 @@ export function MyClientComponent() {
 ```
 
 <Banner type="success">
-  See the [Hooks](../admin/hooks) documentation for a full list of available hooks.
+  See the [Hooks](../admin/react-hooks) documentation for a full list of available hooks.
 </Banner>
 
 ### Adding Styles

docs/fields/overview.mdx

@@ -658,7 +658,7 @@ In addition to the above props, all Server Components will also receive the foll
 
 When swapping out the `Field` component, you are responsible for sending and receiving the field's `value` from the form itself.
 
-To do so, import the [`useField`](../admin/hooks#usefield) hook from `@payloadcms/ui` and use it to manage the field's value:
+To do so, import the [`useField`](../admin/react-hooks#usefield) hook from `@payloadcms/ui` and use it to manage the field's value:
 
 ```tsx
 'use client'
@@ -677,7 +677,7 @@ export const CustomTextField: React.FC = () => {
 ```
 
 <Banner type="success">
-  For a complete list of all available React hooks, see the [Payload React Hooks](../admin/hooks) documentation. For additional help, see [Building Custom Components](../custom-components/overview#building-custom-components).
+  For a complete list of all available React hooks, see the [Payload React Hooks](../admin/react-hooks) documentation. For additional help, see [Building Custom Components](../custom-components/overview#building-custom-components).
 </Banner>
 
 ##### TypeScript#field-component-types

docs/hooks/overview.mdx

@@ -27,7 +27,7 @@ There are four main types of Hooks in Payload:
 
 <Banner type="warning">
   **Reminder:**
-  Payload also ships a set of _React_ hooks that you can use in your frontend application. Although they share a common name, these are very different things and should not be confused. [More details](../admin/hooks).
+  Payload also ships a set of _React_ hooks that you can use in your frontend application. Although they share a common name, these are very different things and should not be confused. [More details](../admin/react-hooks).
 </Banner>
 
 ## Root Hooks

packages/ui/src/forms/Form/context.ts

@@ -24,7 +24,7 @@ export type RenderedFieldSlots = Map<string, RenderedField>
 /**
  * Get the state of the form, can be used to submit & validate the form.
  *
- * @see https://payloadcms.com/docs/admin/hooks#useform
+ * @see https://payloadcms.com/docs/admin/react-hooks#useform
  */
 const useForm = (): Context => useContext(FormContext)
 /**
@@ -42,7 +42,7 @@ const useFormInitializing = (): boolean => useContext(InitializingContext)
 /**
  * Get and set the value of a form field based on a selector
  *
- * @see https://payloadcms.com/docs/admin/hooks#useformfields
+ * @see https://payloadcms.com/docs/admin/react-hooks#useformfields
  */
 const useFormFields = <Value = unknown>(
   selector: (context: FormFieldsContextType) => Value,
@@ -51,7 +51,7 @@ const useFormFields = <Value = unknown>(
 /**
  * Get the state of all form fields.
  *
- * @see https://payloadcms.com/docs/admin/hooks#useallformfields
+ * @see https://payloadcms.com/docs/admin/react-hooks#useallformfields
  */
 const useAllFormFields = (): FormFieldsContextType => useFullContext(FormFieldsContext)
 

packages/ui/src/forms/useField/index.tsx

@@ -27,7 +27,7 @@ import {
 /**
  * Get and set the value of a form field.
  *
- * @see https://payloadcms.com/docs/admin/hooks#usefield
+ * @see https://payloadcms.com/docs/admin/react-hooks#usefield
  */
 export const useField = <TValue,>(options: Options): FieldType<TValue> => {
   const { disableFormData = false, hasRows, path, validate } = options