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.

Here is my code.

<Editable
 defaultValue={rate || '-'}
 submitOnBlur={false}
>
{(props) => (
  <>
    <EditablePreview/>
    <EditableInput
        onBlur={null}
    />
    <EditableControls
        {...props}
        id={no}
    />
  </>
)}

Sandbox: https://codesandbox.io/s/summer-sound-0wvcr?file=/src/App.js