Category taxanomy subcategories

Loops & Logic
1

Hello. I am using following script on my archive page to list sub-categories of current category archive. But this script lists all sub-categories and their sub-categories. I just want to show immediate sub-categories. Can you help me out. Here is my code:

<Loop field=children>
<li class="cat-item">
<a href="{Field url}"><Field title />
<span class="count"><If loop exists type=taxonomy_term taxonomy=category id="{Field children}"><Math><Field count />+<Loop><Field count /><If not last>+</If></Loop></Math><Else />
<Field count /></If></span></a></li>
</Loop></ul></Loop>
2

Template =

<Loop field=archive_term>
  <Set targetCategoryID><Field id /></Set>

  <If loop exists field=children>
    <div class="block-list">
      <Loop field=children>
        <Set childCategoryParentID>
          <Format replace="[" with="">
            <Format replace="]" with="">
              <Field parent />
            </Format>
          </Format>
        </Set>

        <Set logic="isDirectChild">
          <If variable="targetCategoryID" is value="{Get childCategoryParentID}">true<Else />false</If>
        </Set>

        <If logic="isDirectChild">
          <a href="{Field url}" class="block-item"><Field title /></a>
        </If>
      </Loop>
    </div>
  <Else />
    <p>This category has no subcategories.</p>
  </If>
</Loop>

Style =

.block-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.block-item {
  background-color: #f0f0f0;
  color: #007acc;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 16px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.block-item:hover {
  background-color: #007acc;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}