请给一个tsx中forwardRef和chakuraUi的button组件结合的例子

在TypeScript (TSX) 中，`forwardRef` 是 React 的一个高级特性，用于将函数组件的 props 传递给一个受控组件的 ref。Chakra UI 提供了丰富的 UI 组件，包括按钮。下面是一个 `forwardRef` 和 Chakra UI 的 Button 组件结合的例子：

import { Button, useForwardedRef } from '@chakra-ui/react';
import { forwardRef } from 'react';

type CustomButtonProps = {
  onClick: () => void;
};

const CustomButton = forwardRef<HTMLButtonElement, CustomButtonProps>(
  ({ onClick }, ref) => {
    const forwardedRef = useForwardedRef(ref);

    return (
      <Button variant="solid" onClick={onClick} ref={forwardedRef}>
        Click me
      </Button>
    );
  }
);

// 使用CustomButton组件
const MyComponent = () => {
  const handleClick = () => {
    console.log('Button clicked');
  };

  return (
    <CustomButton onClick={handleClick} />
  );
};

export default MyComponent;