سلام وقت بخیر

ref چه جاهایی کاربرد دارد و چه جاهایی نباید از آن استفاده کرد؟

آیا ما میتوانیم ref برای کامپوننت‌ها استفاده کنیم و مثلا اگر ما کامپوننت Input داشته باشیم و بخواهیم ref را داخل کامپوننت بالا دست آن تعریف کنیم بهترین روش برای اینکه به Node داخل کامپوننت Input دسترسی داشته باشیم چیست؟

برای مثال اگر این کامپوننت‌های ما باشند:

// Input.jsx
export default function Input({ type, title, placeholder, ...rest }) {
    return (
        <input
            type={type}
            title={title}
            placeholder={placeholder}
            {...rest}
        />
    )
}

// Form.jsx
import { useEffect, useRef } from "react";
import useForm from "../../hooks/useForm";
import Input from "../Input";
export default function LoginForm() {
    const [username, setUsername] = useForm('');
    const [password, setPassword] = useForm('');
    const textInput = useRef(null);
    useEffect(() => {
        textInput.current?.focus();
    });
    return (
        <form>
            <Input
                title='username'
                placeholder='username'
                type='text'
                value={username}
                onChange={setUsername}
            />
            <Input
                title='password'
                placeholder='password'
                type='password'
                value={password}
                onChange={setPassword}
            />
            <button type="submit" className="btn">Login</button>
        </form>
    )
}

برای چنین فرم ساده ای روش بهینه استفاده از ref چیه؟