I'm facing a weird issue with react functional components.

Context

I have a parent component with two state objects. On useEffect hook, I'm making an API call and setting the state with received response data, and then I'm processing this raw data with some attributes and setting this in the second state.

And on click event of an input element, I'm again processing the raw data(with another set of attributes) which I saved in the first state and then setting this processed data to the second state object.

So everything is working as expected. State object is updating in the initial rendering and on click event also this state is being updated and component re-renders

But the problem is with the DOM, the DOM is not reflecting this state change. I'm wondering what could be the reason. I'm adding some pseudocode to emulate the same scenario.

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>);
}

Any helps would be appreciated. Thanks in advance.