React Hook form and yup validation - reactjs

Question

I have created a buy now component for my react js ecommerce website. The problem I am facing is that the validation of form is not being done. I have used a resolver but still it doesnot validate my form.Here is my code :`
import React, { useEffect, useState } from 'react'
import "./e.css"
import { useForm } from "react-hook-form";
import { yupResolver } from "#hookform/resolvers/yup"
import * as yup from "yup"
export default function BuyNow(props) {
const [country, setCountry] = useState([])
useEffect(() => {
const getcountry = async () => {
const res = await fetch("http://localhost:3000/setpk.json")
const getcon = await res.json()
setCountry(await getcon)
}
getcountry()
}, [])
const schema = yup.object({
fullname: yup.string().required(),
email: yup.string().email().required(),
address: yup.string().required(),
phoneno: yup.number().required().integer().min(11),
city: yup.string().required(),
payment: yup.string().required()
})
const { register, handleSubmit, watch, formState: { errors } } = useForm({
resolver: yupResolver(schema)
});
const onSubmit = (data) => {
console.log(data)
}
return (
<>
<div className="details h-[90vh] bg-indigo-600 mt-20 text-indigo-400 text-center">
<h1 className='text-indigo-200'>Buy Now</h1>
<form onSubmit={handleSubmit(onSubmit)}>
<div className='space-y-5 mt-4 flex flex-col w-[70%] sm:w-[66%] md:w-[55%] mx-auto'>
<input name="thename" id="name" placeholder='Name' {...register("fullname")
} />
<input name="email" id="email" placeholder='Email' className="text-indigo-400 "
{...register("email")
} />
<input name="address" id="address" placeholder='Shipping Address' {...register("address")
} />
<input type="number" name="phone" id="" placeholder='Phone No.' {...register("phoneno")
} />
<select name="sa" id="as" {...register("city")
} >
<option disabled selected >--City Name--</option>
{
country.map((countryget, i) => (
<option key={i} >{countryget.city}</option>
))
}
</select>
<div className='flex relative w-auto'>
<select name="" id="" className='thepayment basis-full w-[70%] ' {...register("payment")
}>
<option disabled selected > --Payment Method-- </option>
<option >Credit Card</option>
<option >Cash on delivery</option>
<option >Bank Transfer</option>
</select>
<img src="http://localhost:3000/creditcard.png" alt="" className='absolute w-10 right-5' />
</div>
{/* <button type="submit" className='bg-indigo-600 p-2 rounded-lg font-mono absolute '>Proceed ➔</button> */}
</div>
<input type="submit" className='bg-rose-600 p-2 rounded-lg font-mono text-white mt-3' />
</form>
</div>
<div className="pricesection h-20 bg-rose-600 fixed bottom-0 left-0 right-0 flex items-center px-1 text-rose-100 justify-evenly md:justify-around">
<h2 className='text-xl md:text-2xl md:font-bold '>Total Price</h2>
<h2 className='text-2xl font-bold '>${props.totalprice}</h2>
</div>
</>
)
}
I want the form to be uncontrolled.I have written schema and also used resolver.

Answer 1

I fixed this by putting yup.string() instead of yup.integer()
phoneno: yup.number().required().integer().min(11),