React Hooks - UseState - Passing object from Child to Parent - reactjs

Question

I am trying to pass data between a child and a parent component using Hooks and Functional Components.
In my parent component I have the following:-
import React, {useState} from "react"
import Card from './Card';
const CardsBoard = () => {
const { ratingObj, setRatingObj } = useState({});
console.log(ratingObj);
const cardInfo1 = {
.......
}
const cardInfo2 = {
.......
}
return (
<div className="container-fluid justify-content-center">
<div className="row">
<div className="col-md-6">
<div>
<h4>Player 1</h4>
</div>
<Card cardInfo={cardInfo1} onClick={() => setRatingObj(ratingObj)} />
</div>
<div className="col-md-6">
<h4>Player 2</h4>
<Card cardInfo={cardInfo2} onClick={() => setRatingObj(ratingObj)}/>
</div>
</div>
<div className="row top-buffer">
<div className="col-md-12 text-center">
<button id="startGameBtn" name="StartGameButton" className="btn btn-secondary">START GAME</button>
</div>
</div>
</div>
)
}
export default CardsBoard
Then in my child component I have the following:-
import React from "react"
const Card = ({ cardInfo, onClick }) => {
return (
<div className="card text-center shadow">
<h4 className="card-title">{cardInfo.title}</h4>
<div className="overflow">
<img src={cardInfo.image} alt={cardInfo.image} className="card-image" />
</div>
<div className="card-body text-dark">
<div className="container-fluid justify-content-center card-rating-text">
{
cardInfo.ratings.map(row => (
<div className="row" key={row[0].title}>
<div className="col-md-4 text-left">{row[0].title}</div>
<div className="col-md-2 text-left card-rating-color" onClick={() => onClick(cardInfo.player, row[0].title, row[0].rating)} >{row[0].rating}</div>
<div className="col-md-4 text-left">{row[1].title}</div>
<div className="col-md-2 text-left card-rating-color" onClick={() => onClick(cardInfo.player, row[1].title, row[1].rating)}>{row[1].rating}</div>
</div>
))
}
</div>
</div>
</div>
)
}
export default Card
At the moment I am getting an error:-
Uncaught TypeError: setRatingObj is not a function
at onClick (CardsBoard.js:58)
at onClick (Card.js:30)
How can I pass the onClick object from the child to the parent?
Thanks for your help and time

Answer 1

Change
const { ratingObj, setRatingObj } = useState({});
to
const [ ratingObj, setRatingObj ] = useState({});
useState returns a two-element array in the shape of [state, setStateFunc], so you have to apply array destructuring to it.