Using state in controlling forms

import './App.css';
import { useState, } from 'react';


function App() {
  const [title, setTitle] = useState("");
  const [color, setColor] = useState("#112596");
  
  const submit = (e) => {
    e.preventDefault();
    alert(`${title}, ${color}`);
    setColor('#256987"');
    setTitle('');
  }

  return (
    <div className="App">
      <form onSubmit={submit}>
        <input
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          type="text"
          placeholder='color title'
        />
        <input 
          value={color}
          onChange={(e) => setColor(e.target.value)}
          type='color'
        />
      <button>Add</button>
      </form>
    </div>
  );
}

export default App;