How to make buttons accept input field and non-clickable?

Question

Hi Team

I am struggling below on my button to do the following requirements on my function component.

function Footer() {
   // buttons to decrease and increase
     const [counter, setCounter] = useState(0);  
     const incrementCount = () => {  
       // Update state with incremented value  
       setCounter(counter + 1);  
     };  
     const decrementCount = () => {  
       // Update state with incremented value  
       setCounter((c) => Math.max(c - 1, 0));  
     };

return(
<>
- -         
       +
)
}

// Requirement i need to produce

If the value is 0, - butoon should be grayed out and non-clickable.
If the value is 3 and you press + value changes to 4.
if an incorrect value is entered using input field(e.g -10), 
on blur-event that value should change to last valid valued used instead