Javascript 如何在react中创建元素并将aria live用作其上的自定义挂钩

有没有一种方法可以创建一个自定义钩子，该钩子能够创建一个组件，作为aria live的播音员来宣布应用程序中的动态更改

目前我使用的是这样的东西：

export const useAnnouncer = () => {
  const [message, setMessage] = useState<string | null>(null)

  const setAnnouncer = (m: string) => setMessage(m)

  const announcer = (
    <div className="sr-only" aria-live="polite" aria-atomic="true" >
      {message}
    </div>
  )
  
  return [announcer, setAnnouncer] as const

export const useAnnouncer=（）=>{
const[message，setMessage]=useState（null）
const setAnnouncer=（m:string）=>setMessage（m）
常数播音员=(
{message}
)
以常量返回[播音员，设置播音员]

实际上，它可以工作。但这不是我的问题。因为现在aria live元素的包装器正在调用钩子的组件中创建

例如：

const Controls = () => {
  const [announcer, setAnnouncer] = useAnnouncer()

const handleClick = () => {
   setAnnouncer('test')
}

return (
  <div>
     {announcer}
     <nav><button onClick={(e: ButtonEvent) => handleClick(e, firstPage)}>test</button></nav>
   </div>
  )
}

const Controls=（）=>{
const[播音员，设置播音员]=使用播音员（）
常量handleClick=（）=>{
SET播音员（“测试”）
}
返回(
{播音员}
handleClick（e，首页）}>test
)
}

我希望在我的jsx中避免使用

{announcer}

。是否可以为aria live in

useAnnouncer

创建一个包装器，并且只在组件中使用setAnnouncer来处理语音通知