Using dynamic supabase options with different schema

Question

So I am using "@supabase/supabase-js": "2.4.1" and I cant seem to change dynamically the schema.

Previously using v1 I can just pass the schema to the custom hooks and called the supabse client like so

const newOptions = {
  ...options,
  schema: schema || 'public',
};

And use the options directly like so

const supabase = createClient(
  // @ts-ignore
  process.env['NX_SUPABASE_URL'],
  process.env['NX_SUPABASE_ANON_KEY'],
  newOptions
);
const firstIndex = page * size - size;
const secondIndex = page * size - 1;
const { data, error: dataError } = await supabase
  .from(table)
  .select(select)
  .range(firstIndex, secondIndex);

But now using v2, the supabse client is declared on the root of the app and I tried to set the options like this but not working

 const [supabaseOptions, setSupabaseOptions] = useState({});
 const [supabaseClient] = useState(() => createBrowserSupabaseClient(supabaseOptions));

  return (
    <SessionContextProvider
      supabaseClient={supabaseClient}
      initialSession={pageProps.initialSession}
    >
      <Layout>
        <Component {...pageProps} setSupabaseOptions={setSupabaseOptions} />
      </Layout>
    </SessionContextProvider>
  );

Setting the options based on the component/page

  useEffect(() => {
    console.log('props', props);
    props.setSupabaseOptions(s => ({
      ...s,
      options: {
        ...s.options,
        schema: 'custom',
      },
    }));
  }, []);