Why react js application showing me warming about changing your component from controllled to uncontrolled?

Question

My Code is this shown below.....

 const navigate = useNavigate()


    const [show, setShow] = useState(false);


    const [values, setValues] = useState({
        email: "",
        otp: ""
    })

    const [error, setError] = useState({
        email: "",
        otp: ""
    })

const handleClose = () => { setShow(false) setValues({ email: "" }) } const handleShow = () => { setShow(true) }

const handleChange = (e) => {
    const { name, value } = e.target

    setValues({
        ...values,
        [name]: value
    })

    if (name === "email") {
        if (value.length < 5 || value.length > 35) {
            setError({
                ...error,
                email: "Please write atleast 5-12 characters...!!!"
            })
        } else {
            setError({
                ...error,
                email: ""
            })
        }
    }

}


const handleSubmit = (e) => {

    e.preventDefault()


    if (values.email === "") {
        setError({
            ...values,
            email: "This Field cannot be Empty...!!!"
        })
    } else if (values.otp === "") {
        let otp = document.getElementById("loginotp")

        const raw = {
            username: values.email
        }
        Apis.addLogin(raw).then((res) => {
            console.log(res.data)

            otp.classList.remove("d-none")
            setShow(true)
            alert("OTP is sent to the registered Email...")

        }).catch(err => {

            if (err.response.data.message === "User Not Found") {
                setError({
                    email: "Sorry the user is not Found...!!!"
                })
            }
            setShow(true)
        })

    } else if (values.otp !== "") {
        const raw = {
            username: values.email,
            password: values.otp
        }
        Apis.verifyLogin(raw).then(res => {
            if (res) {
                alert("Logged In Successully...!!!")
            }

            window.localStorage.setItem("user-info", JSON.stringify(res.data.data))
            navigate("/dashboard")
            setShow(false)
            setValues({
                email: "",
                otp: ""
            })
        }).catch(err => {
            console.log(err.response)


        })
    

Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components input