What's the error "Objects are not valid as a React child (found: object with keys {_id, name, img, des, price, quantity, sName})."

Question

I don't understand why I'm getting this error. I want to understand what's wrong with the following code.

const Book = ({ book }) => {
    const navigate = useNavigate()
    const { _id, name, des, price, quantity, img, sName } = book;
    return (
        <div className='bg-white rounded-xl p-5'>
            <div className='p-5'>
                <img className='rounded-xl hover:shadow-2xl hover:shadow-black transition ease-in- 
                     out  hover:scale-110  duration-700' src={img} alt="" />
            </div>

            <h4 className='text-xl text-red-400 font-serif my-5'>{name}</h4>
            <h6 className='text-red-400 text-xl font-serif py-3'>Price : ${price}</h6>
            <h6 className=' flex justify-between px-5 font-semibold text-gray-500 font-serif'>
                <span className=''>Stock in : {quantity}</span>
                <span>Supply by {sName}</span>
            </h6>
        </div>