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

I think there is a bug with the chakra typing, can anyone help to resolve this issue? This is what I get when using Chakra in a Create-React-App Typescript.

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");

/node_modules/@chakra-ui/core/dist/es/Button/index.js:62

  59 | 
  60 | // Wrong usage of `variantColor` prop is quite common
  61 | // Let's add a warning hook that validates the passed variantColor
> 62 | useVariantColorWarning("Button", variantColor);
     | ^  63 | var buttonStyleProps = useButtonStyle({
  64 |   color: variantColor,
  65 |   variant: variant,

``

[segunadebayo]

Hi @ivanjeremic,

This error shows up when you don’t wrap your App with ThemeProvider from Chakra.

Here’s what you need to do:

// import the provider
import { ThemeProvider, CSSReset } from '@chakra-ui/core'

// in your index.tsx, add this

<ThemeProvider>
   <CSSReset />
   <App/>
</ThemeProvider>

[absolutelysimon]

Perhaps the “Getting Started” documentation should specify that < ThemeProvider > must be the outermost component?