reusable textformfield getting all textformfields active

I have created a reusable textformfield. Which I can call at any file. However I do have a problem. If I tap on the TextFormField of "Email Address" the TextFormField of "Password" is getting active too. Here is the class based function that I am calling in my Stateful Widget.

login_page.dart

// whenever I tap to input a email on this textformfield, it actives the textformfield
// of the userPassword as well.
FormFields.textFormFieldWidget(
  controller: _userEmail,
  hintText: "Email Address",
  hintStyle: CustomTextStyle.reusableTextStyle(
  customColor: const Color(0xFF999EA1),
  customFontSize: 14,
  customFontWeight: FontWeight.w600),
  borderColor: const Color(0xFFCDD1E0),
  colorFilled: _color,
  textFieldFocus: _textFieldFocus,
 ),
const SizedBox(
  height: 12,
),
FormFields.textFormFieldWidget(
  controller: _userPassword,
  isPassword: true,
  hintText: "Password",
  hintStyle: CustomTextStyle.reusableTextStyle(
  customColor: const Color(0xFF999EA1),
  customFontSize: 14,
  customFontWeight: FontWeight.w600),
  borderColor: const Color(0xFFCDD1E0),
  colorFilled: _color,
  suffixIcon: Icons.remove_red_eye,
  textFieldFocus: _textFieldFocus,
 ),

This is my reusable textformfield's declaration and implementation. reusable_widget.dart

import 'package:flutter/material.dart';

class FormFields {
  static textFormFieldWidget({
    TextEditingController? controller,
    String? hintText,
    String? helpText,
    IconData? prefixIcon,
    IconData? suffixIcon,
    bool? isPassword,
    bool? enabled,
    bool? readOnly,
    Color? borderColor,
    Color? borderSide,
    Color? colorFilled,
    FocusNode? textFieldFocus,
    TextStyle? hintStyle,
  }) {
    return TextFormField(
        autovalidateMode: AutovalidateMode.onUserInteraction,
        controller: controller,
        readOnly: readOnly == null ? false : true,
        obscureText: isPassword == null ? false : true,
        decoration: InputDecoration(
          fillColor: colorFilled,
          filled: true,
          focusedBorder: OutlineInputBorder(
            borderRadius: const BorderRadius.all(
                Radius.circular(10.0)),
            borderSide: BorderSide(
              color: borderSide ?? const Color(0xFF6949FF),
              width: 1.15
            ),
          ),
          enabledBorder: OutlineInputBorder(
            borderRadius: const BorderRadius.all(
                Radius.circular(10.0)),
            borderSide: BorderSide(
              color: borderSide ?? const Color(0xFFCDD1E0),
              width: 1.15,
            ),
          ),
          
          // dont forget this line
          hintText: hintText ?? '',
          hintStyle: hintStyle ?? TextStyle(),
          helperText: helpText ?? '',
          prefixIcon: null == prefixIcon ? null : Icon(prefixIcon),
          suffix: null == suffixIcon ? null : Icon(suffixIcon),
          enabled: null == enabled ? true : false,
        ),
        focusNode: textFieldFocus,
        textAlignVertical: TextAlignVertical.center,
        );
  }
}

I only want to make the textformfield active if I tap it or touch its area, not activate all textformfields.

Your two textfields have the same FocusNode, _textFieldFocus.

Give them two different FocusNodes.