Drop down value isn't passed to the controller using ajax

I need to pass a value from a dropdown list to a controller using ajax. But apparently, it doesn't work. The value shows null

<div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" id="btnDropDownCabang" name="btnDropDown"
                    value="Pilih Salah Satu" type="button"
                    data-bs-toggle="dropdown" aria-expanded="false" style="width:250px">
                Pilih Salah Satu
            </button>
            <ul class="dropdown-menu mh" style="max-height: 250px; overflow-y: auto;" id="dropDownMenu"
                aria-labelledby="dropdownMenuButton1" style="width:250px;">
                @foreach($cabang['data'] as $listCabang)
                    <li>
                        <a class="dropdown-item" href="#"
                           data-kode=""
                           data-nama="">
                             - 
                        </a>
                    </li>
                @endforeach
            </ul>
        </div>

let kodeCabang = ""
let namaCabang = ""
$('body').on('click', '.dropdown-item', function () {
                namaCabang = $(this).attr('data-nama')
                $("#btnDropDownCabang").val($(this).attr('data-kode'))
                $("#btnDropDownCabang").html(kodeCabang + '-' + namaCabang + '&nbsp;<span class="caret"></span>');
                kodeCabang = $("#btnDropDownCabang").val()
                //alert(kodeCabang + namaCabang)
                //alert(kodeCabang)
            })

public function test(Request $request)
    {

        $kodeCabang = $request->request->get('btnDropDown');

        dd($kodeCabang);

    }

Can anyone help me? thank you