Using magento 2 accordion widget with href links

I am trying to build a category accordion in my side bar and I am using magento 2 accordion widget

https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/widgets/widget_accordion.html

<?php
$counter = 0;
foreach ($collection as $index=>$category):

    ?>
    <?php $activeClass = $category->getIsActive() ? 'active' : ''; ?>
    <div class="blog-list">
    <div class="parent-categories" id="accordion" data-mage-init=
      '{"accordion":{
      "openedState": "active", 
      "collapsible": true, 
      "active": false, 
      "multipleCollapsible": true}}'>
        <div data-role="collapsible">
            <div data-role="trigger">
                <div class="card-header" id="heading<?= $counter ?>">
                    <h5 class="category-title">
                        <button type="button" class="category-button"  data-toggle="collapse" data-target="#collapse<?= $counter ?>">
                            <a class="blog-link"
                               title="<?= $block->escapeHtml($category->getName()); ?>"
                               href="<?= $block->escapeUrl($category->getUrl()); ?>">
                                <?= $block->escapeHtml($category->getName()); ?> (<?= $block->escapeHtml($block->getPostsCount($category->getId())); ?>)
                            </a>
                            <?php if ($category->getLevel() == '1') : ?>
                                <i class="fa fa-angle-down"></i>
                            <?php endif; ?>
                        </button>
                    </h5>
                </div>
            </div>
        </div>
        <div data-role="content">
            <?php if ($category->hasActiveChildren()): ?>
                <ul class="blog-categories -level<?= $category->getLevel() + 1; ?>">
                    <?= /* @noEscape */ $block->renderChildrenItems($category->getCategoryId()); ?>
                </ul>
            <?php endif; ?>
        </div>

    </div>
</div>
    <?php
    $counter++;
endforeach; ?>

The catgeories are rendered and they are fine, but the issue is that the

<a class="blog-link" 
    title="<?= $block->escapeHtml($category->getName()); ?>" 
    href="<?= $block->escapeUrl($category->getUrl()); ?>">

does not work. So when ever I click on accordion elements or child elements it just opens/closes it. How can I make the links clickable?
I guess it should have something with the data-mage-init but I am not sure how to fix it. Can someone please help me?