React 18 Change or update attribute using setState

Hello StackOverflow Community

I am trying to update the state of a json object using setState in a child component but its not working. The data attribute is empty. What am I doing wrong?

App.JS

const [userData, setUserData] = useState({
    firstName: "",
    lastName:"",
    email: "",
    code:"",
  })

return (
<div>
<Child parentInfo = {{userData, setUserData}} />
</div>
)

Child.js

function Join({parentInfo}) {
...

parentInfo.setUserData({
     ...response.data,
     code: response.data.code});
}

return(
<header className="form-header">
       <h2>{parentInfo.userData}</h2>
         {parentInfo.userData}
   </header>
)

Where response is the same json but filled with some more data. But Code attribute is empty even after doing a setState though reponse.data contains a value for code.
eg

response.data = {firstName: "test",
    lastName:"test",
    email: "test",
    code:"123",
}