请给一个tsx中forwardRef用法的例子！！！

当然可以。在 TypeScript 中，`forwardRef` 是一种将 `ref` 属性从组件向上层组件传递的技术，常用于处理原生元素或者其他需要手动管理引用的对象。下面是一个简单的 TypeScript 示例，展示了如何在 Chakra UI 的 `Box` 组件上使用 `forwardRef`：

import React from 'react';
import { forwardRef, Box } from '@chakra-ui/react';

type CustomBoxProps = {
  // 定义 props
  customStyle?: React.CSSProperties;
};

// 使用 forwardRef 将 ref 属性传递给原生 HTML div 元素
const CustomForwardedBox = forwardRef<HTMLDivElement, CustomBoxProps>((props, ref) => {
  // 在这里可以使用 ref 获取并操作 div 的 DOM
  const handleRef = (node: HTMLDivElement | null) => {
    if (node && ref.current !== node) {
      ref.current = node; // 更新 ref 当新节点可用时
    }
  };

  // 用 ref 和 props 创建返回的 JSX
  return (
    <div ref={handleRef} style={{ ...props.customStyle }}>
      {/* 这里是盒子的内容 */}
    </div>
  );
});

// 使用 CustomForwardedBox
function App() {
  return (
    <CustomForwardedBox customStyle={{ backgroundColor: 'blue', padding: 10 }}>
      Hello, world!
    </CustomForwardedBox>
  );
}

export default App;