How can I access react context in react-styleguidist's Wrapper component?

Question

What I want:

I'm trying to add a dynamic theme option to a react-styleguidist project I'm working on. Following the idea laid out in this unfinished and closed pr, I added a custom ThemeSwitcher component, which is a select menu that is rendered in the table of contents sidebar. Selecting an option should update the brand context, which renders the corresponding theme using styled-components' BrandProvider. It should function like the demo included with the closed pr: https://fancy-sg.surge.sh/.

What's not working:

I can't access the same context in my ThemedWrapper as is provided and updated in the StyleguideWrapper and ThemeSwitcher. Examining the tree in the React Components console, it looks like react-styleguidist may render ReactExample outside of the StyleguideRenderer, which means it loses the context from the provider in that component.

Assuming I'm correct about the context not updating in ThemedWrapper due to it being located outside of StyleGuideRenderer, two high level ideas I have (but haven't been able to figure out how to do) are:

1. Find the correct component that is an ancestor of both StyleGuideRenderer and ReactExample in the react-styleguidist library and add the BrandProvider there so that ThemedWrapper now has context access
2. Some other context configuration that I haven't found yet that will allow two components to consume the same context without having a provider as an ancestor (is this possible??)

What I have:

Here are the condensed versions of the relevant code I'm using.

brand-context.js (exports context and provider, inspired by Kent C Dodds

import React, { createContext, useState, useContext } from 'react';

const BrandStateContext = createContext();
const BrandSetContext = createContext();

function BrandProvider({ children, theme }) {
  const [brand, setBrand] = useState(theme);
  return (
    <BrandStateContext.Provider value={brand}>
      <BrandSetContext.Provider value={(val) => setBrand(val)}>
        {children}
      </BrandSetContext.Provider>
    </BrandStateContext.Provider>
  );
}

function useBrandState() {
  return useContext(BrandStateContext);
}

function useBrandSet() {
  return useContext(BrandSetContext);
}

export { BrandProvider, useBrandState, useBrandSet };

StyleGuideWrapper.jsx (Copy of rsg-components/StyleguideRenderer, with addition of ThemeSwitcher component to toggle theme from ui; passed in styleguide config as StyleGuideRenderer)

import React from 'react';
import cx from 'clsx';
import Styled from 'rsg-components/Styled';

import ThemeSwitcher from './ThemeSwitcher';
import { BrandProvider } from './brand-context';

export function StyleGuideRenderer({ children, classes, hasSidebar, toc }) {
  return (
    <BrandProvider>
      <div className={cx(classes.root, hasSidebar && classes.hasSidebar)}>
        <main className={classes.content}>
          {children}
        </main>
        {hasSidebar && (
          <div className={classes.sidebar} data-testid="sidebar">
            <section className={classes.sidebarSection}>
              <ThemeSwitcher classes={classes} />
            </section>
            {toc}
          </div>
        )}
      </div>
    </BrandProvider>
  );
}

StyleGuideRenderer.propTypes = propTypes;

export default Styled(styles)(StyleGuideRenderer);

ThemeSwitcher.jsx

import React from 'react';
import Styled from 'rsg-components/Styled';

import { useBrandSet, useBrandState } from './brand-context';

const ThemeSwitcher = ({ classes }) => {
  const brand = useBrandState();
  const setBrand = useBrandSet();
  const onBrandChange = (e) => setBrand(e.target.value);

  const brands = ['foo', 'bar'];

  return (
    <label className={classes.root}>
      Brand
      <select value={brand} onChange={onBrandChange}>
        {brands.map((brand) => (
          <option key={brand} value={brand}>{brand}</option>
        ))}
      </select>
    </label>
  );
};

export default Styled(styles)(ThemeSwitcher);

ThemedWrapper.jsx (passed in styleguide config as Wrapper, and wraps each example component to provide them to styled-components)

import React from 'react';
import { ThemeProvider } from 'styled-components';
import { BrandStateContext } from './brand-context';

const LibraryProvider = ({ brand, children }) => {
  return (
    <ThemeProvider theme={brand}>{children}</ThemeProvider>
  );
};

function ThemedWrapper({ children }) {
  return (
    <BrandStateContext.Consumer>
      {brand => (
        <LibraryProvider brand={brand}>{children}</LibraryProvider>
      )}
    </BrandStateContext.Consumer>
  );
}

export default ThemedWrapper;