React实现文本框内字符计数及父容器聚焦状态问题求助

各位开发者朋友好，我最近在尝试做一个“伪文本框”，想要把字符计数显示在文本框内部（类似常见的右下角展示输入字数的效果），但卡在了父容器的聚焦状态展示上，实在搞不定来求助！

我的实现思路是：用一个带文本框样式的父div，里面嵌套一个无样式的textarea，再加上字符计数的div，组合成这个伪文本框，结构大概是这样的：

<div> {/* 给父div设置textarea的样式 */}
  <textarea />
  <div style={{display: 'flex', justifyContent: 'flex-end'}}>{counter}/2000</div>
</div>

现在视觉上已经达到预期效果了，但问题是当点击textarea的时候，我想让父div也能显示出聚焦的视觉状态（比如边框变色）。我本来想用useRef钩子来让父div获得焦点，试了下却没效果：

const ref = useRef(null);

<div ref={ref}>
  <textarea onClick={() => ref.current.focus()} />
  {/* 字符计数div */}
</div>

我现在有点困惑，想请教下大家：div元素到底能不能触发聚焦状态呀？是不是我用错事件了？有没有其他办法能实现点击textarea时，让父容器展示出聚焦的视觉效果？

备注：内容来源于stack exchange，提问作者Valeriia