我是 React 的新手，正在创建一个自定义选择组件，该组件应该设置一个数组选定状态，同时触发 onchange 事件并将其与选定项一起传递给父级，同时获取初始值作为 prop 并设置一些数据。

let firstTime = true;
const CustomSelect = (props)=>{
    
    const [selected, setSelected] = useState([]);

     const onSelectedHandler = (event)=>{
         
        // remove if already included in the selected items remove 
        //otherwise add

         setSelected((prev)=>{
            if (selected.includes(value)) {
                values =  prevState.filter(item => item !== event.target.value);
             }else {
                values =  [...prevState, event.target.value];
             }
            return values;
         })

         // tried calling props.onSelection(selected) but its not latest value
     }

   //watch when the value of selected is updated and pass onchange to parent 
   //with the newest value
   useEffect(()=>{
     if(!firstTime && props.onSelection){
          props.onSelection(selected);
      }
    firstTime = false;
   },[selected])
     
   
   return (<select onChange={onSelectedHandler}>
              <option value="1"></option>
            </select>);

 };

我正在像这样的父级上使用它

 const ParentComponent = ()=>{

   const onSelectionHandler = (val)=>{
      //do stuff with the value passed
    }

   return (
    
     <CustomSelect initialValue={[1,2]} onSelection={onSelectionHandler} />

  );

  }

 export default ParentComponent

上面的方法运行良好，但现在问题出现了，当我想通过更新选定状态将从父级传递的 initialValue 设置为 customSelect 时。我在 CustomSelect 上添加了以下内容，但它会导致无限循环

const {initialValue} = props
useEffect(()=>{
  //check if the value of initialValue is an array 
  //and other checks
   setSelected(initialValue) 
 
 },[initialValue]);

我知道我可以在 useState 中传递 initialValue，但我想在设置选定状态之前做一些检查。 我该如何解决这个问题，我还是 React 的新手。