First of all, I apologize for my poor English.

I used react hook form today.

I created a login form component and placed an input component inside it.

I tried applying watch to email input and password input, but useEffect does not work.

It seems like I can’t sense the change.

However, I created and applied the tag under the input components, and it worked here.

'use client';
import { useEffect, useState } from 'react';
import Input from '../inputs/Input';
import { useLoginStore } from '@shared/store/form/login';
import styles from '@shared/components/Forms/LoginForm.module.css';
import { useForm, useWatch } from 'react-hook-form';

export default function LoginForm() {
  const [visibility, setVisibility] = useState(false);
  const { email, setEmail, setPassword } = useLoginStore();
  const {
    register,
    watch,
  } = useForm();

  const visibilityToggle = () => {
    setVisibility(!visibility);
  };

  const values = watch('email', '');

  useEffect(() => {
    setEmail(values);
    console.log(values);
  }, [values]);

  return (
    <form className={styles['form']}>
      <div className={styles['email']}>
        <Input
          page={'login-email'}
          option={'normal'}
          name={'email'}
          {...register('email')}
        />
      </div>
      <div className={styles['password']}>
        <Input
          page={'login-password'}
          option={'password'}
          name={'password'}
          visibility={visibility}
          onClick={visibilityToggle}
        />
      </div>
     <input />  // If you apply it here, it will work.
    </form>
  );
}

'use client';
import styles from '@shared/components/inputs/Input.module.css';
import classNames from 'classnames';
import Image from 'next/image';

/**type, label, name, option, placeholder, onChange, visibility */
export default function Input({ page, option, visibility, onClick, ...props }) {
  const inputClass = classNames({
    [styles[page]]: page,
  });

  const inputs = {
    textarea: <textarea className={inputClass} {...props} />,
    normal: <input className={inputClass} {...props} />,
    password: (
      <div className={styles[`password-container-${page}`]}>
        <input
          className={inputClass}
          type={visibility ? 'text' : 'password'}
          {...props}
        />
        {visibility ? (
          <div className={styles['visibility-on']} onClick={onClick}>
            <Image src={'/visibility-on.svg'} fill />
          </div>
        ) : (
          <div className={styles['visibility-off']} onClick={onClick}>
            <Image src={'/visibility-off.svg'} fill />
          </div>
        )}
      </div>
    ),
  };

  const input = inputs[option];

  return <div className={styles['input-container']}>{input}</div>;
}