Why theme change doesn't propagate to the child?

In the following example, when the theme selector changes to “product”, the Button is rerendered but it still sees the “marketing” theme. What am I missing here?

CodeSandbox

function Button({ primary, children }) {
  return (
    <button
      sx={{
        bg: primary ? "primary" : "secondary"
      }}
    >
      {children}
    </button>
  );
}

function App() {
  const [theme, setTheme] = useState("marketing");

  return (
    <ThemeProvider theme={require(`./themes/${theme}`)}>
      <select
        value={theme}
        onChange={e => {
          setTheme(e.target.value);
        }}
      >
        <option value="marketing">Marketing</option>
        <option value="product">Product</option>
      </select>
      <Button primary>Do something</Button>
    </ThemeProvider>
  );
}

[jxnblk]

@moroshko we’ve updated the behavior here a little bit. If you not using gatsby-plugin-theme-ui and using the ThemeProvider directly for this, I think the theme should be able to update in a setup like this. Could you try with the latest version to see if this is still an issue?

[jxnblk]

Closing this because the behavior will be changing in v0.3 – see #535