[React] Componente DatePicker quebrando a tela na edição

Criei o seguinte componente para selecionar datas no UnForm:

export default function DatePickerInput({ name, ...rest }) {
const datepickerRef = useRef(null);
const { fieldName, defaultValue = '', registerField } = useField(name);

const [date, setDate] = useState(defaultValue || null);
useEffect(() => {
registerField({
name: fieldName,
ref: datepickerRef.current,
path: 'props.selected',
});
}, [fieldName, registerField]);

return (
<Label htmlFor={fieldName}>
<UnInput>
<ReactDatePicker
ref={datepickerRef}
selected={date}
onChange={setDate}
dateFormat="dd/MM/yyyy"
placeholderText="dd/mm/aaaa"
writable="true"
{...rest}
/>
</UnInput>
</Label>
);
}


Para salvar registros o componente está funcionando normalmente, carregando e salvando a data que eu selecionei. Quando vou editar um registro, ao tentar carregar a data no load inicial, a página é quebrada e é exibido o seguinte erro:

Unhandled Rejection (TypeError): Cannot assign to read only property 'selected' of object '#<Object>'


Se eu comento a linha path: 'props.selected', no useEfect() a tela não é quebrada, porém a data não é preenchida no componente. Como fazer para funcionar ?

Continue reading...