Soy nuevo en el desarrollo de React después de un poco de práctica, estaba creando un formulario usando React y en la consola mostró algunos errores, estoy viendo este tipo de error la primera vez, así que, ¿pueden ayudarme a entender esto? ¿Cómo puedo solucionar esto? donde me equivoque?

 import React, { useState } from "react"; const ControlledInputs = () => { const [username, setUsername] = useState(); const [email, setEmail] = useState(); const handleSubmit = (e) => { e.preventDefault(); console.log(username, email); }; return ( <> <article> <form className="form" onSubmit={handleSubmit}> <div className="form-control"> <label htmlFor="firstName">Username :</label> <input type="text" name="username" id="username" value={username} onChange={(e) => setUsername(e.target.value)} /> </div> <div className="form-control"> <label htmlFor="email">Email : </label> <input type="text" name="email" id="email" value={email} onChange={(e) => setEmail(e.target.value)} /> </div> <button>Add User</button> </form> </article> </> ); }; export default ControlledInputs;

Mostrando error en la consola Advertencia :

 ` A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. in input (at 1-controlled-inputs.js:18) in div (at 1-controlled-inputs.js:16) in form (at 1-controlled-inputs.js:15) in article (at 1-controlled-inputs.js:14) in ControlledInputs (at App.js:7) in div (at App.js:6) in App (at src/index.js:8) in StrictMode (at src/index.js:7) `