Estou tentando usar useImperativeHandle, mas ainda recebo o erro "Não é possível adicionar a propriedade atual, o objeto não é extensível". Em cada tutorial o código é escrito de maneira semelhante e está funcionando corretamente. Há algo que estou perdendo, mas não sei o quê.
Elemento filho
const Toast = forwardRef((ref) => {
const [openToast, setOpenToast] = useState(true);
useImperativeHandle(ref, () => ({
show() {
alert("hello");
},
}));
return (
<div>
</div>
);
});
export default Toast;
Elemento pai
const FooterForm = () => {
const toastRef = useRef(null);
return (
<>
<Toast ref={toastRef} />
<button
onClick={() => {toastRef.current.show();}}
type="button">
Click
</button>
</>
);
};
export default FooterForm;
Preciso passar ref para o componente filho e executar a função "show"