.

docs/sdk/spa/react/_init-client.mdx

@@ -21,7 +21,7 @@ const App = () => (
 
 :::caution[`LogtoProvider` will implicity re-render contained component]
 
-React has a powerful composition model. The `LogtoProvider` uses *containment* to reuse code between components.
+React has a powerful composition model. The `LogtoProvider` uses _containment_ to reuse code between components.
 
 Some components don't know their children ahead of time. This is especially common for components like `LogtoProvider`
 that represent generic OAuth2 flows. Such components use the special `children` prop to pass children elements directly
@@ -48,16 +48,16 @@ Anything inside the `<LogtoProvider>` JSX tag gets passed into the `LogtoProvide
 By composition, the children takes advantage of
 [Inversion of Control](https://en.wikipedia.org/wiki/Inversion_of_control) by delegating the OAuth2 flows to logto
 library. The tricky part, however, is that the transparency of logto gets polluted into React business logics. For
-example, the `<LogtoProvider>` has a [side effect](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) of
+example, the `<LogtoProvider>` has a [side effect](<https://en.wikipedia.org/wiki/Side_effect_(computer_science)>) of
 
 ```tsx
-    useEffect(() => {
-        (async () => {
-            const isAuthenticated = await memorizedLogtoClient.logtoClient.isAuthenticated();
-            setIsAuthenticated(isAuthenticated);
-            setLoadingCount((count) => Math.max(0, count - 1));
-        })();
-    }, [memorizedLogtoClient]);
+useEffect(() => {
+  (async () => {
+    const isAuthenticated = await memorizedLogtoClient.logtoClient.isAuthenticated();
+    setIsAuthenticated(isAuthenticated);
+    setLoadingCount((count) => Math.max(0, count - 1));
+  })();
+}, [memorizedLogtoClient]);
 ```
 
 Since the async operation invokes `setIsAuthenticated`, any client-side logic of