Add a conditional error and success message on a panel based on required input fields are filled or not. If all fields are filled,"Done" should did

Question

I want to add a Conditional message on a panel as "Required" if the user has not filled all the required input fields, and "Done" if the user has filled all the required input fields.

Assume that there are 4 required input fields that use formik and yup for validation.

Answer 1

const myComp =()=>{
 const [obj,setObj]= useState()
 const [error,setError] = useState()

 // this function is used to added 
 // error to error state from there
 // it will be check that error occures 
 // or not
 const addError =(value)=>{
   // if it doesn't satisfies required condition
   // add error
   }
 
 // this function can be called on click 
 // or when you want to show error or success
 const checkSuccess = ()=>{   
   // if no erorr 
   // show success
   // or show error  
 }
 return (
  <>
       
  </>
 ) 
}