Checkbox Admin UI Component Can't Default to Checked

Extensions
1

We are writing an Admin Block UI Extension and I’ve noticed that I can’t have a form’s checkbox default to being checked and be able to utilize the dirty state of the form / contextual save bar, as described here.

When using the code below the checkbox renders as checked, but unchecking it leaves the form “clean”, then re-checking it (back to the default state) triggers the contextual save bar. I don’t have any means to render the form as being checked and then trigger a need to save once the component is unchecked by a user.

import { useState } from "react";
import {
  AdminBlock,
  Form,
  Checkbox,
  reactExtension,
  useApi,
} from "@shopify/ui-extensions-react/admin";

export default reactExtension("admin.product-details.block.render", () => <App />);

function App() {
  const { i18n } = useApi();
  const [backorder, setBackorder] = useState(false);

  return (
    <AdminBlock>
      <Form>
        <Checkbox
          name="backorder"
          label={i18n.translate('labels.backorder')}
          defaultValue={true}
          checked={true}
          onChange={setBackorder}
        />
      </Form>
    </AdminBlock>
  );
}
2

In looking at the type definition for CheckboxProps it appears that defaultValue isn’t available on Checkbox elements. How then can we utilize the dirty form state with checkboxes?