Estoy trabajando en next.js en un archivo jsx para contexto. Mis restricciones de campo de entrada no funcionan y no restringen el envío del botón Enviar. ¿Cómo puedo arreglar esto?

 if (!Boolean(userToken)) return ( <> <div> <p className="">address: {address}</p> </div> <div id="form" className="absolute p-10 transform -translate-x-1/2 -translate-y-1/2 border-2 rounded-md shadow-lg top-1/3 left-1/2 " > <h2 className="flex p-5 text-2xl font-semibold"> Link Username </h2> <form id="" className=""> <input id="username" className="m-5 border-2 rounded outline-0 focus:bg-slate-100 hover:bg-slate-50" type="text" value={userName} onChange={(event) => setUsername(event.target.value)} required minLength="3" maxLength="30" pattern="[a-zA-Z0-9_]+" title="only letters, numbers, and underscores." /> <button className="p-1 rounded hover:bg-slate-100 actve:bg-slate-200" type="submit" onClick={(e) => writeUserData(address, userName)} > Link Name </button> </form> </div> </> );