diff --git a/docs/guides/initialize-atom-on-render.mdx b/docs/guides/initialize-atom-on-render.mdx
index f496d29ef4..8771356164 100644
--- a/docs/guides/initialize-atom-on-render.mdx
+++ b/docs/guides/initialize-atom-on-render.mdx
@@ -93,3 +93,48 @@ This behavior is due to our child components looking for the lowest commmon `Pro
 For more information on `Provider` behavior, please read the docs [here](../core/provider.mdx).
 
 For more complex use cases, check out [Scope extension](../extensions/scope.mdx).
+
+### Using Typescript
+
+`useHydrateAtoms` has overloaded types and typescript cannot extract types from overloaded function. It is recommended to use a `Map` when passing initial atom values to the `useHydrateAtoms`.
+
+Here is a working example:
+
+```tsx
+import type { ReactNode } from 'react'
+import { Provider, atom, useAtomValue } from 'jotai'
+import type { WritableAtom } from 'jotai'
+import { useHydrateAtoms } from 'jotai/utils'
+
+const testAtom = atom('')
+
+export default function App() {
+  return (
+    <Provider>
+      <AtomsHydrator atomValues={[[testAtom, 'hello']]}>
+        <Component />
+      </AtomsHydrator>
+    </Provider>
+  )
+}
+
+//This component contains all the states and the logic
+function Component() {
+  const testAtomValue = useAtomValue(testAtom)
+  return <div>{testAtomValue}</div>
+}
+
+function AtomsHydrator({
+  atomValues,
+  children,
+}: {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  atomValues: Iterable<
+    readonly [WritableAtom<unknown, [any], unknown>, unknown]
+  >
+  children: ReactNode
+}) {
+  useHydrateAtoms(new Map(atomValues))
+  return children
+}
+```