Me enfrento a un problema extraño con los componentes funcionales de reacción.

Contexto

Tengo un componente principal con dos objetos de estado. En el enlace useEffect, realizo una llamada a la API y establezco el estado con los datos de respuesta recibidos, y luego proceso estos datos sin procesar con algunos atributos y los configuro en el segundo estado.

Y al hacer clic en el evento de un elemento de entrada, vuelvo a procesar los datos sin procesar (con otro conjunto de atributos) que guardé en el primer estado y luego configuro estos datos procesados en el segundo objeto de estado.

Así que todo está funcionando como se esperaba. El objeto de estado se actualiza en la representación inicial y en el evento de clic también se actualiza este estado y el componente se vuelve a representar

Pero el problema es con el DOM, el DOM no refleja este cambio de estado. Me pregunto cuál podría ser la razón. Estoy agregando un pseudocódigo para emular el mismo escenario.

 function ParentComponent = () => { const [rawData, setRawData] = useSate({}); const [data, setData] = useState({}); const handleClick = ({attr: 'new attr'}) => { const getProcessedData = processData(rawData, { attr }); setData(getProcessedData); } useEffect(() => { const fetchData = async () => { const res = await fetch('apiurl'); setRawData(res); const getProcessedData = processData(res, { attr:'process based on this attr'}); setData(getProcessedData); } fetchData(); }, []) return (<Container> <button onClick={() => handleClick({attr: 'new attr'})}>Click me</button> //Here the child component recieves the updated data on click event but its not reflecting the DOM. <Child data={data} /> </Container>); }

Cualquier ayuda sería apreciada. Gracias por adelantado.