You have a couple of issues in your code:

Issues:

1. Duplicate data-bs-toggle="tab" in the tag

2. Incorrect href="#{{$item->id}}": The id used in the tab content has an extra # (id="#{{$item->id}}"), which is incorrect

3. Use of # in id attributes: In the div inside tab-content, id="#{{$item->id}}" should be id="{{$item->id}}"

Corrected Code:

<div class="col-sm-12">
    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
        @foreach($state as $item)
        <li role="presentation" class="nav-item">
            <a class="nav-link {{ $loop->first ? 'active' : ''}}" 
                data-bs-toggle="tab" href="tab-{{$item->id}}">
                {{$item->name}}
            </a>
        </li>
        @endforeach
    </ul>
    <div class="tab-content" id="pills-tabContent">
        @foreach($state as $item)
        @php
        $agent = \App\Models\Agent::where('state_id', $item->id)->get();
        @endphp
        <div id="tab-{{$item->id}}" 
            class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" 
            role="tabpanel">
            @foreach($agent as $items)
            <p>
                {{$items->name}}
            </p>
            @endforeach
        </div>
        @endforeach
    </div>
</div>

JavaScript (If Needed) If the tabs are still not working, ensure Bootstrap's JavaScript is included and use this jQuery snippet:

$(document).ready(function() {
    var firstTab = $('#pills-tab a:first');
    if (firstTab.length) {
        firstTab.tab('show');
    }
});