[React css フレームワーク chakra]TypeError: Cannot use 'in' operator to search for 'green' in undefined

Question

前提・実現したいこと

Reactのcssフレームワークであるchakraを使おうと思っています。
しかし、npm install後すぐにbuttonコンポーネントを描画しようとしたら以下のエラーが発生しました。
これはバグでしょうか？

参考
https://chakra-ui.com/button

発生している問題・エラーメッセージ

TypeError: Cannot use 'in' operator to search for 'green' in undefined

useVariantColorWarning
node_modules/@chakra-ui/core/dist/es/utils/index.js:113
  110 | var variantColorIsDefined = variantColor != null;
  111 | 
  112 | if (variantColorIsDefined) {
> 113 |   var variantColorExists = variantColor in theme.colors; // If variant color exists in theme object
      | ^  114 | 
  115 |   if (!variantColorExists) {
  116 |     console.warn("You passed an invalid variantColor to the " + label + " Component. Variant color values must be a color key in the theme object that has '100' - '900' color values. Check http://chakra-ui.com/theme#colors to see possible values");

Comments

[hoshi-takanori]

ThemeProvider ってやつを使う必要があるようです。
https://github.com/chakra-ui/chakra-ui/issues/723