estoy usando el paquete react-qr-code para generar código qr, pero el problema es que se procesa inmediatamente en lugar de después de hacer clic en el botón Enviar, así que para eso, quiero una función que pueda generar el código qr después de hacer clic en el botón no sé qué debería hacerlo, trato de cortarlo en componentes pero sigue siendo el mismo

 import React from 'react'; import './QrCodeInfo.css'; import QRCode from "react-qr-code"; import { useState } from 'react'; function QrCodeInfo(props) { const [wifiName, setWifiName] = useState(''); const [password, setPassword] = useState(''); const clickButton=()=>{ let qrimage = password return (qrimage) } return( <div className='center'> <div className=" center card shadow"> <div className='flex'> <form> <div className="user-details"> <div className="input-box"> <span className="details">WifiName</span> <input type="text" placeholder="Enter your WifiName" value={wifiName} onChange={event => setWifiName(event.target.value)} required/> </div> <div className="input-box"> <span className="details">Password</span> <input type="text" placeholder="Enter your Password" value={password} onChange={event => setPassword(event.target.value)} required/> </div> </div> <div className='center'> <button type='button'className='center' onClick={clickButton}> Submit </button> </div> </form> <div> <h1 >{wifiName}</h1> <QRCode value='' /> </div> </div> </div> </div> ) } export default QrCodeInfo;