Народ в чем ошибка ? function Drawer({onClose, items, onRemove })

{
return(
<div className="overlay">
<div className="drawer">
<h2 className="mb-30 d-flex justify-between"
>Корзина <img onClick={onClose} className="cu-p" src="/img/btn-remove.svg" alt="" />
</h2>

{items.length > 0 ? (
<div>
<div className="items">
{items.map((obj) => (

<div className="cartItem d-flex align-center mb-20">
<div
style={{backgroundImage: url(${obj.imageUrl})}}
className="cartItemImg"></div>

<div className="mr-20 flex">
<p className="mb-5">{obj.title}</p>
<b>{obj.price} руб.</b>
</div>

<img onClick={() => onRemove(obj.id)}
className="removeBtn"
src="/img/btn-remove.svg"
alt="Remove"
/>
</div>

))}
<div>
<div className="cartTotalBlock">
<ul>
<li>
<span>Итого:</span>
<div></div>
<b>21 498 руб. </b>
</li>
<li>
<span>Налог: 5%:</span>
<div></div>
<b>1074 руб.</b>
</li>
</ul>
<button className="greenButton">Оформить заказ
<img src="/img/arrow.svg"
alt=""/></button>
</div>
</div>

) : {(
<h2>Корзина пустая</h2>
)}

</div>
</div>
);
}

export default Drawer;

попробуй вот так, в тернарном операторе запуталса ты )) {items.length > 0 ? ( <div> <div className="items"> {items.map((obj) => ( <div className="cartItem d-flex align-center mb-20"> <div style={{backgroundImage: url(${obj.imageUrl})}} className="cartItemImg"></div> <div className="mr-20 flex"> <p className="mb-5">{obj.title}</p> <b>{obj.price} руб.</b> </div> <img onClick={() => onRemove(obj.id)} className="removeBtn" src="/img/btn-remove.svg" alt="Remove" /> </div> ))} <div> <div className="cartTotalBlock"> <ul> <li> <span>Итого:</span> <div></div> <b>21 498 руб. </b> </li> <li> <span>Налог: 5%:</span> <div></div> <b>1074 руб.</b> </li> </ul> <button className="greenButton">Оформить заказ <img src="/img/arrow.svg" alt=""/></button> </div> </div> </div> </div> ) : {( <h2>Корзина пустая</h2> )} ); }