Mission : dépolluer un composant qui modifie ses props

Contexte

Un développeur junior a écrit ce composant qui, après un clic sur "Appliquer la remise", n'affiche jamais le nouveau prix à l'écran malgré l'absence d'erreur dans la console :

function CarteProduit({ prix }) {
    function appliquerRemise() {
        prix = prix * 0.9; // aucune erreur visible, mais l'affichage ne bouge jamais
    }
    return (
        <div>
            <p>{prix}€</p>
            <button onClick={appliquerRemise}>Appliquer la remise</button>
        </div>
    );
}

Ce même fichier fait aussi transiter une prop theme à travers trois composants intermédiaires (Layout, Sidebar, Menu) qui ne l'utilisent jamais eux-mêmes, juste pour l'atteindre plus bas.