Evento onClick su react

Ciao a tutti. Dopo aver quasi finito di leggere il libro consigliato da Alka su React( bellissimo libro). Ho provato a scrivere qualcosa e naturalmente mi sono stoppato sulla gestione di un click su un pulsante. Non riesco a capire perchè l'evento onClick sul pulsante non produce nulla. Mentre l'evento onChange della textbox funziona. Vorrei ,invece , che quando premo il pulsante faccia la verifica che il campo Nome sia pieno o vuoto. Posto il codice che ho fatto finora così magari risulta più chiaro quello che voglio fare. Tutti gli esempi che ho trovato in rete portano diverse soluzioni come risposta, tipo al verificarsi dell'evento click scatta un'alert oppure si utilizza il console.log. Io invece vorrei visualizzare l'informazione su un semplice paragrafo:

import './App.css';
import { useState } from 'react';

export default function App(){
const [nome,setNome]=useState('');

function Nome (){
  
  return(
    <>
    <label>Nome</label>
    <input type="text" onChange={(e) =>{setNome(e.target.value)}}>
    </input> 
    </>
  );
}


function Cognome (){
 return(
<>
<label>Cognome</label><input type="text"></input>
</>
  );
}

function Telefono(){
  return(
    <>
    <label>Telefono</label><input type="text"></input>
    </>
  );
}

function Email(){
  return(
    <>
    <label>Email</label><input type="text"></input>
    </>
  );
}

function Msg(){
  if(nome === ''){
  return <p>Inserisci il nome</p>
}else{
  return <p>ok</p>
}
}


function Btn(){

  return <button type="button" >Invia</button>;

}

return(
  <div className="col-2 p-3 m-5 bg-light">
  
  <Nome />
  <Cognome />
  <Telefono />
  <Email />
  <Btn  onClick= {Msg} />
  
  </div>

 ); 
 }

Questo è il risultato finale di quello che ho fatto fino adesso.Sto lavorando solo sul campo Nome. Ho provato in diversi modi. Grazie per l'eventuale aiuto.