Wrong Import Button target area

[menghif]

Clicking anywhere in these red areas triggers the handleImportClick() function.

[Amnish04]

This might be a side effect of having all these buttons inside a label element. It is one of the problems I have mentioned in #550.

<FormLabel>
  Offline database is {isPersisted ? "persisted" : "not persisted"}
  <ButtonGroup ml={2}>
    <Button
      size="xs"
      onClick={() => handlePersistClick()}
      isDisabled={isPersisted}
      variant="outline"
    >
      Persist
    </Button>
    <Button size="xs" onClick={() => handleImportClick()}>
      Import
    </Button>
    <Input
      type="file"
      ref={inputRef}
      onChange={handleFileChange}
      style={{ display: "none" }}
    />
    <Button size="xs" onClick={() => handleExportClick()}>
      Export
    </Button>
  </ButtonGroup>
</FormLabel>