working with uncontrolled component (form control using useRef)

function App() {
  const txtTitle = useRef();
  const txtColor = useRef();

  const submit = (e) => {
    e.preventDefault();
    const title = txtTitle.current.value;
    const color = txtColor.current.value;
    alert(`${title}, ${color}`);
    txtTitle.current.value = '';
    txtColor.current.value = '#115566';
  }

  return (
    <div className="App">
      <form onSubmit={submit}>
        <input 
          type="text"
          placeholder='color title'
          ref={txtTitle}
        />
        <input 
          type='color'
          ref={txtColor}  
        />
      <button>Add</button>
      </form>
    </div>
  );
}