一个具有任意多个子组件的React父组件如何在不使用useRef的情况下通过其字符串id更新选定的子组件？

import React, { useState } from 'react';

function ParentComponent() {
  const [selectedId, setSelectedId] = useState(null);

  const updateSelectedId = (id) => {
    setSelectedId(id);
  };

  return (
    <div>
      {children.map((child) => (
        <ChildComponent
          key={child.id}
          id={child.id}
          isSelected={child.id === selectedId}
          updateSelectedId={updateSelectedId}
        />
      ))}
    </div>
  );
}

function ChildComponent({ id, isSelected, updateSelectedId }) {
  const handleClick = () => {
    updateSelectedId(id);
  };

  return (
    <div onClick={handleClick} style={{ background: isSelected ? 'yellow' : 'white' }}>
      {id}
    </div>
  );
}