Example Code

type AuthenticationFormProps = {
  children: React.ReactNode;
  onSubmit: SubmitHandler<Record<string, any>>;
  type: "register" | "login" | "remind";
};

export default function AuthenticationForm({
  children,
  type,
  onSubmit,
}: AuthenticationFormProps) {
  const methods = useForm<FormInputs>();
  const { handleSubmit, register } = methods;

  let informationText = "";
  let buttonText = "";
  let linkText = "";
  let remindText = "";
  // let urlLink = "";

  switch (type) {} //not important

  return (
    <form
      className="flex h-full flex-col gap-8"
      onSubmit={handleSubmit(onSubmit)}
    >
      {children} //with this inputs works, but react hook form is not working

      {React.Children.map(children, (child) => {
        return child && React.isValidElement(child) && child.props.name
          ? React.cloneElement(child, {
              ...child.props,
              register: register,
              key: child.props.name,
              onChange: (e: ChangeEvent<HTMLInputElement>) => {
                // Call the original onChange prop if it exists
                if (child.props.onChange) {
                  child.props.onChange(e);
                }
              },
            })
          : child;
      })} //with this inputs doesn't work
        <button type="submit">{buttonText}</button> 
    </form>
  );
}

const LoginForm: React.FC = () => {
  const [mail, setMail] = useState("");
  const [password, setPassword] = useState("");
  const onSubmit: SubmitHandler<FormInputs> = (data) => {
    console.log(data); // You can handle form submission logic here
  };

  return (
    <AuthenticationForm onSubmit={onSubmit} type="login">
      <InputText
        label="Mail"
        name="mail"
        onChange={(e) => setMail(e.target.value)}
        value={mail}
      />
      <InputText
        label="Password"
        name="password"
        onChange={(e) => setPassword(e.target.value)}
        value={password}
      />
    </AuthenticationForm>
  );
};

export default LoginForm;


type InputTextProps = {
  placeholder?: string;
  classNames?: string;
  value: string;
  name: string;
  label?: string;
  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
  register?: any;
};

export default function InputText({
  placeholder = "",
  classNames = "",
  value,
  onChange,
  label,
  name,
  register,
  ...rest
}: InputTextProps) {
  return (
    <div className="flex flex-col">
      {label && <label className="text-lg">{label}</label>}
      <input
        type="text"
        value={value}
        onChange={onChange}
        placeholder={placeholder}
        className={`border-black h-10 rounded-md border border-solid pl-2 shadow-input outline-none ${classNames}`}
        {...(register && register(name))}
        {...rest}
      />
    </div>
  );
}