입력을 지금은 useRef를 써서 관리하고 있는데, 이 방법이 한계가 있어서 여러 폼 라이브러리를 사용하는 것 같았어요. 멘토님께서 느끼기에 어느 문제점 떄문에 폼 라이브러리를 사람들이 많이 쓰는 것일까요?

import { Ref, useRef, useImperativeHandle, forwardRef, useState } from 'react'
import { LoginProps } from '@/pages/LoginPage'
import { ErrorAlert } from '@/pages/LoginPage/components'
import { PATH } from '@/routes/constants'
import { validateEmail } from '@/utils'

//TODO - 비밀번호 유효성 검사 필요
interface LoginGroupProps {
  handleLogin: () => void
}

const LoginGroup = forwardRef(
  (props: LoginGroupProps, ref: Ref<{ getValues: () => LoginProps }>) => {
    const emailRef = useRef<HTMLInputElement | null>(null)
    const passWordRef = useRef<HTMLInputElement | null>(null)

    const [validEmail, setValidEmail] = useState<boolean>(true)
    const handleFocusEmail = () => {
      setValidEmail(true)
    }

    const handleBlurEmail = () => {
      if (emailRef.current?.value) {
        setValidEmail(validateEmail(emailRef.current.value))
      }
    }

    useImperativeHandle(ref, () => ({
      getValues: () => {
        return {
          email: emailRef.current?.value ?? '',
          password: passWordRef.current?.value ?? '',
        }
      },
    }))

import { useRef } from 'react'
import { useLocalStorage } from '@/hooks'
import { useLogin } from '@/apis/hooks'
import { LoginGroup, LogoGroup } from './components'

export interface LoginProps {
  email: string
  password: string
}

const LoginPage = () => {
  const loginGroup = useRef<{ getValues: () => LoginProps } | null>(null)

  const [user, setUser] = useLocalStorage('user')
  const { mutate: login } = useLogin()

  const handleLoginButtonClick = () => {
    if (loginGroup.current?.getValues) {
      const { email, password } = loginGroup.current.getValues()
      login(
        { email, password },
        {
          onSuccess: ({ data }) => {
            setUser(data)

            console.log(user)
          },
        },
      )
    }
  }

  return (
    <div className="w-50% flex h-full flex-col items-center gap-4 bg-main-ivory dark:bg-main-red-100">
      <LogoGroup />
      <LoginGroup ref={loginGroup} handleLogin={handleLoginButtonClick} />
    </div>
  )
}
export default LoginPage

type Props = {
  initValue: string;
  onChange: (event) => {
}
const useInput = ({}: Props) => {
  const ref = useRef();

  const [value, setState] = useState();

  const handleChange (event)=> {
   setValue(event.current.value); 
 }
  const getValue

	return { watch: () => value,
}


const inputProps = useInput();
const { getValues,  } = inputProps;

<input {...inputProps} />


i

const useForm = () => {}


const [form, setForm] = useState({ id: '', pw: ''});

const getInput = (key: string) => return form[key];
const handleInput = (key, value) => useForm({...form, [key]: value});