function ScaleForm() {
  const [rootNote, setRootNote] = useState('Do')

  const handleChangeRootNote = (e) => {
    setRootNote(e.target.value)
  }

  return (
    <div className='App'>
      <h2>Root Note : "{rootNote}"</h2>
      <form>
        <p>
          <label>RootNote</label><br/>
          <select name="root" defaultValue={rootNote} onChange={handleChangeRootNote}>
            <option value="Do">Do</option>
            <option value="Reb">Reb</option>
            <option value="Re">Re</option>
            <option value="Mib">Mib</option>
            <option value="Mi">Mi</option>
            <option value="Fa">Fa</option>
            <option value="Solb">Solb</option>
            <option value="Sol">Sol</option>
            <option value="Lab">Lab</option>
            <option value="La">La</option>
            <option value="Sib">Sib</option>
            <option value="Si">Si</option>
          </select>
        </p>
      </form>
    </div>
  )
}