Ref & useRef hook | Controlled and Uncontrolled form components in ReactJS

import React, { useRef } from 'react'
export const UseRef = () => {
    const luckName = useRef(null)
    const submitForm = (e) => {
        e.preventDefault();
        console.log(luckName)
        console.log(luckName.current)
        console.log(luckName.current.value)
    }
    return (
        <>
            <div className="container">
                <form action="" onSubmit={submitForm}>
                    <input type="text" ref={luckName} />
                    <button className="btn btn-primary m-4">Submit</button>
                </form>
            </div>
        </>
    )
}