将DOM引用存储到状态挂钩中可以吗？

Question

我有以下代码：

Groups.js

const Groups = ({ groups }) => {
  const [groupFilter, setGroupFilter] = useState(null)
  return <>
    <div ref={node => setGroupFilter(node)}/>
    <h1>My title</h1>
    <DataList
      data={groups}
      renderFilter={filter => groupFilter && createPortal(
        <div>
          {filter}
          <div>Filter 3</div>
        </div>,
        groupFilter
      )}
    />
  </>
}

DataList.js

const DataList = ({ data, renderFilter }) => {
  return <>
    {renderFilter(<>
      <div>Filter 1</div>
      <div>Filter 2</div>
    </>)}
    data.map(element =>
      <div key={element.id}>{element.name}</div>
    )
  </>
}

基本上，DataList可以渲染一堆列表过滤器和数据列表本身。 renderFilter告诉组件如何渲染过滤器。我想在Groups内部使用门户网站在DataList外部渲染过滤器。

我首先尝试使用useRef，但没有成功，因为设置时它不会触发重新渲染。像我一样使用状态钩执行此操作是否安全？

谢谢。