rsuitejs Check Picker закрывается после изменения

Я использую компоненты React Suits в своем проекте, и когда я пытаюсь использовать компонент CheckPicker, он продолжает закрываться после каждой проверки, и мне приходится снова открывать всплывающее окно, чтобы выполнить вторую проверку.

вот мой код

const SolvedModal =(props)=>{
 const elmployeeSelector = React.forwardRef((props, ref) => <CheckPicker size="lg" data={employees} valueKey="id" labelKey='name' {...props} ref={ref} block />);
 const [group,setGroup]=React.useState([]);
 return ( 
 <Form fluid>
  <Form.Group controlId="group-1" block>
  <Form.Control name="group" size="lg" accepter={elmployeeSelector} value={group} onChange={e=>setGroup(e)} placeholder="Group" block />
  </Form.Group>
 </Form>)
}

Решение проблемы

Использование React.forwardRef внутри другого компонента React создает новый компонент React в каждом цикле рендеринга. Переместите его за пределы SolvedModalкомпонента.

const elmployeeSelector = React.forwardRef((props, ref) => (
 <CheckPicker
 size="lg"
 data={employees}
 valueKey="id"
 labelKey='name'
 {...props}
 ref={ref}
 block
 />
));
 
const SolvedModal = (props) => {
 const [group, setGroup] = React.useState([]);
 return ( 
 <Form fluid>
 <Form.Group controlId="group-1" block>
 <Form.Control
 name="group"
 size="lg"
 accepter={elmployeeSelector}
 value={group}
 onChange={e=>setGroup(e)}
 placeholder="Group"
 block
 />
 </Form.Group>
 </Form>
 );
}