How to style an individual <li> as opposed to all <li> in React?

I am having some trouble changing the colour of an item that has been added to a cart at an e-commerce project. I can make it so that when the item is clicked, the class changes and the item get a colour. As a side effect, all accompanying items get the colour as well.

The ‘Service’ component

const Service = (props) => {

    const context = useContext(ThemeContext)

    return (
        <>
            <li className={context.cartItems.some(item => item.type === "service") ? "inCart" : ""}
                onClick={() => { context.cartItems.some(item => item) ?
                    context.removeFromCart(props) : context.addToCart(props)}} >
                {props.name}
            </li>
        </>
    )
}

The ‘Options’ component which renders the above component

const Options = () => {

    const context = useContext(ThemeContext)

    const serviceElements = servicesList.map(service => 
        <Service key={service.id} id={service.id} name={service.name} type={service.type} /> )

    return (
        <div className={`Options-${context.theme}`}>
            <ul>
                {serviceElements}
            </ul>
        </div>
    )
}

The add and remove from cart methods

function addToCart(newItem) { 
        cartItems.map(item => newItem.type === item.type && removeFromCart(item)) 
        setCartItems(prevItems => [...prevItems, newItem])
    }

    function removeFromCart(itemToRemove) { 
        setCartItems(prevItems => prevItems.filter(item => 
            `${item.id}-${item.type}` !== `${itemToRemove.id}-${itemToRemove.type}`)) 

    }

Scss

.Options-light {
  .inCart {
    background-color: blue;
}

Source: ReactJs