Show/hide password component does not work

I am trying to implement the show/hide password functionality when a user logs in. I followed the instructions from Magento, https://developer.adobe.com/commerce/frontend-core/ui-components/howto/show-hide-password-checkbox/, but they don’t seem to work.

I looked at this ticket as well, customer/account/login Showpassword checkbox doesnt work, but it didn’t help much.

I am able to get the checkbox to display, but when I click it, it doesn’t do anything.

It looks like it’s hitting the JS as it should …

Here is my code. What am I missing?

app/design/frontend/Vendor/default/Magento_Customer/templates/form/login.phtml

<div class="block block-customer-login">
<div class="block-title">
    <strong id="block-customer-login-heading" role="heading" aria-level="2"><?= $block->escapeHtml(__('Registered Customers')) ?></strong>
</div>
<div class="block-content" aria-labelledby="block-customer-login-heading">
    <form class="form form-login"
          action="<?= $block->escapeUrl($block->getPostActionUrl()) ?>"
          method="post"
          id="login-form"
          data-mage-init='{"validation":{}}'>
        <?= $block->getBlockHtml('formkey') ?>
        <fieldset class="fieldset login" data-hasrequired="<?= $block->escapeHtml(__('* Required Fields')) ?>">
            <div class="field note"><?= $block->escapeHtml(__('If you have an account, sign in with your email address.')) ?></div>
            <div class="field email required">
                <label class="label" for="email"><span><?= $block->escapeHtml(__('Email')) ?></span></label>
                <div class="control">
                    <input name="login[username]" value="<?= $block->escapeHtmlAttr($block->getUsername()) ?>"
                        <?php if ($block->isAutocompleteDisabled()): ?> autocomplete="off"<?php endif; ?>
                           id="email" type="email" class="input-text"
                           title="<?= $block->escapeHtmlAttr(__('Email')) ?>"
                           data-mage-init='{"mage/trim-input":{}}'
                           data-validate="{required:true, 'validate-email':true}"
                           placeholder="<?= $block->escapeHtml(__('Email')) ?>">
                </div>
            </div>
            <div class="field password required">
                <label for="pass" class="label"><span><?= $block->escapeHtml(__('Password')) ?></span></label>
                <div class="control">
                    <input name="login[password]" type="password"
                        <?php if ($block->isAutocompleteDisabled()): ?> autocomplete="off"<?php endif; ?>
                           class="input-text" id="pass"
                           title="<?= $block->escapeHtmlAttr(__('Password')) ?>"
                           data-validate="{required:true}"
                           placeholder="<?= $block->escapeHtml(__('Password')) ?>">
                </div>
            </div>
            <div class="field choice" data-bind="scope: 'showPassword'">
                <!-- ko template: getTemplate() --><!-- /ko -->
            </div>
            <?= $block->getChildHtml('form_additional_info') ?>
            <div class="actions-toolbar">
                <div class="primary"><button type="submit" class="action login primary" name="send" id="send2"><span><?= $block->escapeHtml(__('Sign In')) ?></span></button></div>
                <div class="secondary"><a class="action remind" href="<?= $block->escapeUrl($block->getForgotPasswordUrl()) ?>"><span><?= $block->escapeHtml(__('Forgot Your Password?')) ?></span></a></div>
            </div>
        </fieldset>
    </form>
</div>
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Customer/js/block-submit-on-send": {
                "formId": "login-form"
            },
            "Magento_Ui/js/core/app": {
                "components": {
                    "showPassword": {
                        "component": "Magento_Customer/js/show-password",
                        "passwordSelector": "#pass"
                    }
                }
            }
        }
    }
</script>