Shopify - Checkbox being unchecked during checkout

Question

I have a problem with Shopify Checkout Extensibility.

The goal is simple - add a checkbox into the checkout pages.

I'm using a REACT app to do so and I'm able  to relatively easily add a checkbox using Checkout UI extensions.

The problem is that the checkout is being unchecked every time the shipping costs are being recalculated.

There are many tutorial on how to solve this problem, but honestly not one of them is fixing it on my side.

See below for the code, if you have any ideas I would be very grateful.

import {
  reactExtension,
  Checkbox,
  useApplyMetafieldsChange,
  useMetafield
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.reductions.render-after',
  () => <Extension />,
);

function Extension() { 
  const checkedValue = useMetafield({
    namespace: "checkoutcustomizer",
    key: "adddirectsignature_v1"
  })

  const setChange = useApplyMetafieldsChange();

  return (
    <Checkbox 
      checked={checkedValue?.value}
      onChange={ (value) => {
        setChange({
          type: "updateMetafield",
          namespace: "checkoutcustomizer",
          key: "adddirectsignature_v1",
          valueType: "string",
          value
        })
      }}>
      Add Direct Signature
    </Checkbox>
  );
}