Como pegar valor selecionado de dropdown toggle e inserir numa variável?

Front-end
,
#1

Tenho dois menus dropdown na minha página web:

        Campo:
        
        <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
            Selecione o Campo
          </button>
          <ul class="dropdown-menu col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12" aria-labelledby="dropdownMenuButton1">
            <li><a class="dropdown-item">Codigo</a></li>
            <li><a class="dropdown-item">Cargo</a></li>
            <li><a class="dropdown-item">Tipo</a></li>
            <li><a class="dropdown-item">Nome</a></li>
            <li><a class="dropdown-item">Nome Usual</a></li>
            <li><a class="dropdown-item">CPF/CNPJ</a></li>
            <li><a class="dropdown-item">RG</a></li>
            <li><a class="dropdown-item">Data Nascimento</a></li>
            <li><a class="dropdown-item">Endereco</a></li>
            <li><a class="dropdown-item">Numero</a></li>
            <li><a class="dropdown-item">Complemento</a></li>
            <li><a class="dropdown-item">Bairro</a></li>
            <li><a class="dropdown-item">CEP</a></li>
            <li><a class="dropdown-item">Cidade</a></li>
            <li><a class="dropdown-item">Estado</a></li>
            <li><a class="dropdown-item">Pais</a></li>
            <li><a class="dropdown-item">Nome Conjuge</a></li>
            <li><a class="dropdown-item">Nome Pai</a></li>
            <li><a class="dropdown-item">Nome Mae</a></li>
          </ul>
        </div>
        
        <p id="Teste01"> Teste </p>
        <br/>
        
        Tipo de Busca:
        
        <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
            Selecione a Busca
          </button>
          <ul class="dropdown-menu col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12" aria-labelledby="dropdownMenuButton1">
            <li><a class="dropdown-item" >Comeca com</a></li>
            <li><a class="dropdown-item" >Igual a</a></li>
            <li><a class="dropdown-item" >Termina com</a></li>
            <li><a class="dropdown-item" >Contem</a></li>
            <li><a class="dropdown-item" >Contem as partes</a></li>
          </ul>
        </div>
        
      	<br/>

Eu preciso pegar o valor quando o usuário selecionar um item do menu dropdown e setar numa variável. Eu tentei algo como (com o Jquery):

var campo = $(document).ready(function(){
	$('.dropdown-item').text()
	
});
document.getElementById("Teste01").innerHTML = campo;

Coloquei um parágrafro de teste, para ver se ele seria alterado quando o usuário selecionasse alguma opção do dropdown toggle, mas nada aconteceu. Recebi o erro:

Uncaught TypeError: Cannot set property ‘innerHTML’ of null at ContasReceber.js:80

Por qual motivo a variável não recebeu o valor do dropdown toggle?