Fix: Prevent infinite re-render loop by lazy-loading StoryClient in S…

…toryProvider

This change fixes an issue where the StoryClient was being re-created on every render, causing an infinite re-render loop. 
By lazily initializing the StoryClient only once, the component will now only create the client when it's first needed, avoiding unnecessary renders.

Additionally, a loading state is added to improve user experience while the client is being initialized.
This ensures that the component doesn't break or display unexpected behavior during the initialization process.

packages/react-sdk/src/StoryProtocolContext.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, ReactNode, useState } from "react";
+import { createContext, useContext, ReactNode, useState, useEffect } from "react";
 import { StoryClient, StoryConfig } from "@story-protocol/core-sdk";
 
 type Props = {
@@ -9,16 +9,23 @@ type Props = {
 const StoryContext = createContext<StoryClient>({} as StoryClient);
 
 const StoryProvider = ({ config, children }: Props) => {
-  const [client, setClient] = useState<StoryClient>();
+  const [client, setClient] = useState<StoryClient | undefined>(undefined);
 
-  if (!client) {
+  useEffect(() => {
     setClient(StoryClient.newClient(config));
+  }, [config]);
+
+  if (!client) {
+    return <div>Loading...</div>; // Loading state while the client is being created
   }
+
   return (
-    <StoryContext.Provider value={client!}>{children}</StoryContext.Provider>
+    <StoryContext.Provider value={client}>{children}</StoryContext.Provider>
   );
 };
+
 const useStoryContext = (): StoryClient => {
   return useContext(StoryContext);
 };
+
 export { useStoryContext, StoryProvider };