title: Reset Chakra UI Editable Input when editing
body: <p>I am using the chakra UI Editable component and set '-' as the default value if there is no value available. So, when editing input is visible as below. But I want to remove the '-' when editing.</p>
  <p><a href="https://i.stack.imgur.com/vtGPG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vtGPG.png" alt="enter image description here" /></a></p>
  <p>Here is my code.</p>
  <pre><code>&lt;Editable
   defaultValue={rate || '-'}
   submitOnBlur={false}
  &gt;
  {(props) =&gt; (
    &lt;&gt;
      &lt;EditablePreview/&gt;
      &lt;EditableInput
          onBlur={null}
      /&gt;
      &lt;EditableControls
          {...props}
          id={no}
      /&gt;
    &lt;/&gt;
  )}
  </code></pre>
  
  <p>Sandbox: <a href="https://codesandbox.io/s/summer-sound-0wvcr?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/summer-sound-0wvcr?file=/src/App.js</a></p>