为何 export default function index({ref }) { // 这里有提示报错：绑定元素“ref”隐式具有“any”类型。ts(7031)？

我定义了一个组件如下：code-blockcontainer

import React, { useRef } from 'react'



export default function index({ref }) {  // 这里有提示报错：绑定元素“ref”隐式具有“any”类型。ts(7031)

  const clickButton = () => {
    console.log('输出子组件的实例信息：',  ref.current)
  }
  
  return (
    <div>
      <button onClick={clickButton} >点击按钮</button>
    </div>
  )
}

使用的时候：

import React, { useRef } from 'react';

import './App.css';

import CodeBlockContainer from './component/code-blockcontainer'

function App() {

  const childRef = useRef<HTMLDivElement>(null)

  return (
    <div className="App">
      <CodeBlockContainer ref={childRef}></CodeBlockContainer>
    </div>
  );
}

export default App;

===

问题是：定义组件时候这一行有报错：

export default function index({ref }) {  // 这里有提示报错：绑定元素“ref”隐式具有“any”类型。ts(7031)

请问这里应该如何进行处理呢？我变为：

{ref: React.RefObject<HTMLDivElement>} 

也会报错。