has no exported member 'ChakraStyleProps'. when upgrading from 1.0.4 > 1.3.2

I have just upgraded my package and TS is generating the following error:

Module '"../../../node_modules/@chakra-ui/react/dist/types"' has no exported member 'ChakraStyleProps'.

2 import { ChakraStyleProps, HStack, useBreakpointValue } from "@chakra-ui/react"

Full Error

components/pages/blog/Category.tsx:2:10 - error TS2305: Module '"../../../node_modules/@chakra-ui/react/dist/types"' has no exported member 'ChakraStyleProps'.

2 import { ChakraStyleProps, HStack, useBreakpointValue } from "@chakra-ui/react"
           ~~~~~~~~~~~~~~~~

theme/index.ts:26:34 - error TS2345: Argument of type '{ fonts: { demi: string; book: string; light: string; freight: string; }; fontWeights: { light: number; normal: number; medium: number; boldish: number; bold: number; }; fontSizes: { 13: string; 8: string; 5: string; ... 5 more ...; "-2": string; }; ... 6 more ...; components: { ...; }; }' is not assignable to parameter of type 'ThemeOverride'.
  Type '{ fonts: { demi: string; book: string; light: string; freight: string; }; fontWeights: { light: number; normal: number; medium: number; boldish: number; bold: number; }; fontSizes: { 13: string; 8: string; 5: string; ... 5 more ...; "-2": string; }; ... 6 more ...; components: { ...; }; }' is not assignable to type 'DeepThemeExtension<{ components: { Accordion: { parts: string[]; baseStyle: { container: { borderTopWidth: string; borderColor: string; _last: { borderBottomWidth: string; }; }; button: { fontSize: string; _focus: { boxShadow: string; }; _hover: { ...; }; _disabled: { ...; }; px: number; py: number; }; panel: { ...;...'.
    The types of 'breakpoints.toString' are incompatible between these types.
      Type '(() => string) & (() => string)' is not assignable to type 'string'.

26 export const theme = extendTheme(appTheme)
                                    ~~~~~~~~


Found 2 errors.

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
husky > pre-commit hook failed (add --no-verify to bypass)

Theme File

import { extendTheme } from "@chakra-ui/react"

import * as themeConfig from "./themeConfig"

import { components } from "./components"
import { colors } from "./colors"
import { breakpoints } from "./breakpoints"
import { fontVariants } from "./fontVariants"

const styles = {
  global: {
    ...fontVariants,
    body: {
      ...fontVariants,
    },
  },
}

const appTheme = {
  styles,
  breakpoints,
  colors,
  components,
  ...themeConfig,
}
export const theme = extendTheme(appTheme)

[TimKolberger]

@hutber maybe this comment will help you: https://github.com/chakra-ui/chakra-ui/issues/3372#issuecomment-778795289

[segunadebayo]

Yes, please replace the import to StyleProps.