How to show two minicarts on same page in Magento2

I am trying to show two minicarts in Magento2. One minicart is on the header which shows on all pages and one is on the product detail page. The minicart on the header is working on all pages other than the product detail page. On the product detail page when I click on the header minicart link the cart is displayed on the second minicart inside the page. Below is the code for the minicart on header

<div data-block="minicart2" class="minicart-wrapper">
        <a href="<?= $block->escapeUrl($block->getShoppingCartUrl()) ?>" class="action showcart header-cart" data-bind="scope: 'cart_check'">
            <div class="ViewCart addedCartColor"><i class="fa fa-shopping-cart" aria-hidden="true"></i> View Cart</div>
        
            
            <div class="ItemList">
            <!-- ko if: getCartParam('summary_count') -->
                <!-- ko text: getCartParam('summary_count') --><!-- /ko -->
                <!-- ko i18n: 'items' --><!-- /ko -->
            <!-- /ko -->
            </div>
        
        </a>
    <?php if ($block->getIsNeedToDisplaySideBar()) :?>
        <div class="block block-minicart"
             data-role="dropdownDialog"
             data-mage-init='{"dropdownDialog":{
                "appendTo":"[data-block=minicart2]",
                "triggerTarget":".showcart",
                "timeout": "2000",
                "closeOnMouseLeave": false,
                "closeOnEscape": true,
                "triggerClass":"active",
                "parentClass":"active",
                "buttons":[]}}'>
            <div id="minicart-content-wrapper" data-bind="scope: 'cart_check'">
                <!-- ko template: getTemplate() --><!-- /ko -->
            </div>
            <?= $block->getChildHtml('minicart.addons') ?>
        </div>
    <?php else :?>
        <script>
            require(['jquery'], function ($) {
                $('a.action.header-cart').click(function() {
                    $(document.body).trigger('processStart');
                });
            });
        </script>
    <?php endif ?>
    <script>
        window.checkout = <?= /* @noEscape */ $block->getSerializedConfig() ?>;
    </script>
    <script type="text/x-magento-init">
    {
        "[data-block='minicart2']": {
            "Magento_Ui/js/core/app": <?= /* @noEscape */ $block->getJsLayout() ?>
        },
        "*": {
            "Magento_Ui/js/block-loader": "<?= $block->escapeJs(
                $block->escapeUrl($block->getViewFileUrl('images/loader-1.gif'))
            ) ?>"
        }
    }
    </script>
    <script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "cart_check": {
                    "component": "Magento_Checkout/js/view/minicart"
                }
            }
        }
    }
}
</script>
</div>

I have changed the data-block and data-bind="scope:" names for this header minicart