How to use the @chakra-ui/theme.useTheme function in @chakra-ui/theme

const useInputStyle = (props: any) => {
  const theme = useTheme();
  const { colorMode } = useColorMode();

  const _props = { ...props, theme, colorMode };

  return {
    width: props.isFullWidth ? "100%" : undefined,
    ...baseProps,
    ...sizeProps(_props),
    ...variantProps(_props),
    // pb: "1px"
  };
};

showBorder,
    borderColor,
    ...props
  }: AvatarProps,
  ref: React.Ref,
) {
  const avatarStyleProps = useAvatarStyle({
    name,
    size,
    showBorder,
    borderColor,
  });
  // const hasLoaded = useHasImageLoaded({ src: src || "" });
  const hasLoaded = false;

  const theme = useTheme();
  const sizeKey = avatarSizes[size];
  const _size = theme.sizes[sizeKey];
  const fontSize = `calc(${_size} / 2.5)`;

  const renderChildren = () => {
    if (src && hasLoaded) {
      return (
        
      );

const Icon = React.forwardRef(function Icon<p>(
  {
    size = "1em",
    name,
    color = "currentColor",
    role = "presentation",
    focusable = "false",
    ...rest
  }: IconProps</p><p>,
  ref: React.Ref,
) {
  const { icons } = useTheme();

  // Fallback in case you pass the wrong name
  const iconFallback = icons["question-outline"];
  let path: JSX.Element = ;
  let viewBox = "0 0 24 24";

  if (name) {
    path = icons[name] == null ? iconFallback.path : icons[name].path;

    viewBox =
      (icons[name] == null ? iconFallback.viewBox : icons[name].viewBox) ||
      "0 0 24 24";
  }

  return (
    </p>

const Comp = (props: any, ref: React.Ref) => {
    const theme = useTheme();
    const componentTheme = theme[__themeKey as keyof Theme];

    let styleProps: Record = {};

    // constraints. We'll only allow variant, variantColor and size to be theme-aware
    const themeable = ["__size", "__variant", "__variantColor"];

    for (const key of themeable) {
      // Get the component style for any of the themeable props
      const themedStyle =
        componentTheme &&
        componentTheme[key] &&
        componentTheme[key][(props as any)[key]];

      styleProps = {
        ...styleProps,

const useAlertStyle = (props: AlertStyleProps): SystemProps => {
  const { colorMode } = useColorMode();
  const theme = useTheme();
  const _props = {
    ...props,
    theme,
  };

  return {
    ...baseProps,
    ...statusStyleProps(_props)[colorMode as string],
  };
};

const useButtonStyle = (props: UseButtonStyleProps): SystemProps => {
  const { colorMode } = useColorMode();
  const theme = useTheme();

  const _props = { ...props, colorMode, theme };
  return {
    ...baseProps,
    ...sizeProps(_props),
    ...focusProps,
    ...disabledProps,
    ...variantProps(_props),
  };
};

const useBadgeStyle = (props: UseBadgeStyleProps) => {
  const theme = useTheme();
  const { colorMode } = useColorMode();
  const _props = { ...props, theme, colorMode };

  return variantProps(_props);
};

const InputGroup = forwardRef(function InputGroup(
  { children, size = "md", ...props }: InputGroupProps,
  ref: React.Ref,
) {
  const { sizes } = useTheme();
  const height = inputSizes[size] && inputSizes[size]["height"];
  let pl: SystemProps["pl"] | null = null;
  let pr: SystemProps["pr"] | null = null;

  return (
    
      {Children.map(children, child => {
        if (!isValidElement(child)) return;

        if (child.type === InputLeftElement) {
          pl = sizes[height as InputSizes];
        }
        if (child.type === InputRightElement) {
          pr = sizes[height as InputSizes];
        }
        if (child.type === Input) {