We previously had a feature where Boolean props would show a checkbox to the left of them in the DevTools pane. It was removed when the JSON editor was added, but I think we should add it back. It should work like this:

1. If the value is a boolean, the checkbox should show up to the left of `true` / `false` value
2. If it's no longer a boolean (e.g. gets edited manually), the checkbox disappears
}
  };
  const applyChanges = () => {
    if (isValid && hasPendingChanges) {
      overrideValueFn(path, parsedValue);
    }
  };
  let placeholder = '';
  if (editableValue === undefined) {
    placeholder = '(undefined)';
  } else {
    placeholder = 'Enter valid JSON';
  }
  return (
    <Fragment>
      <input
        autoComplete="new-password"
        className={`${isValid ? styles.Input : styles.Invalid} ${className}`}
        onBlur={applyChanges}
        onChange={handleChange}
        onKeyDown={handleKeyDown}
        placeholder={placeholder}
        ref={inputRef}
        type="text"
        value={editableValue}
      />
    </Fragment>
  );
}