Difficultés Code React - Premier Code

Décrivez ici votre problème ou ce que vous cherchez à faire.
Notre professeur nous a demandé de faire un formulaire avec le prix unitaire et le nombre d'article. Une fois qu'on clique sur le bouton valider, le total doit être afficher en dessous. En sachant, que le formulaire doit être divisées entre 3 composants, c'est obligatoire. Mais cette partie je l'ai réussi. Le problème, c'est que j'ai essayé maintenant d'appliquer le code react permettant de faire le calcul fournie par le prof mais rien ne s'est affichée.

"```"
import { useState } from 'react'
import '../public/article.png'
import './App.css'
const [valueTot, setValueTot] = changer = (e) => {setValueTot(e.target.value);}

export default function App() {
  return (
    <>
    <div id="flex">
    <Image/>
      <div id="align">
        <h1>Calcul du prix</h1>
        <Login/>
        <br/>
        <Valid/>
      </div>
      <Result/>
    </div>
    </>
  )
}
export function Login() {
  return (
    <>
      <div>
          <div>
              <input type="number" class="input" value={valueTot} onChange={changer} placeholder="Quantité" id="qte"/>
              <br/>
              <br/>
              <input type="number" class="input" placeholder="Prix unitaire" id="price"/>
          </div>
      </div>
    </>
  )
}
export function Valid() {
    return (
          <>
            <div>
            <button id="cancel">Annuler</button>
                <input type="submit" value="Valider" onClick={ (e)=> {e.preventDefault ();}} id="valid"/>
            </div>
            </>
    )
  }
  export function Image() {
    return (
      <>
    <img id="img" src="article.png" alt="Image de l'article"></img>
    </>
    )
  }
  export function Result() {
    return (
          <>
            <div>
            <p>Total : {valueTot} </p>
            </div>
            </>
    )
  }
 "```"

Ce que je veux

Trouver où se trouve le problème dans mon code

Ce que j'obtiens
Rien du tout. C'est blanc. Rien n'est affichée.