useState

Front-end
#1

Pelo que entendi o useState, é utilizando dentro de uma mesma função para atualizar variável ou componente html dentro da mesma função.

O que preciso é:

Tenho um formulário é nele eu preciso chamar métodos em outro arquivo. Até aqui tudo bem, funciona. Isto é, vai lá no banco de dados, busca e traz os resultados e preenche a variável.

O problema é que não está atualizando o componente.

>      const FormularioPrincipalView = () => {

          const pivotPrincipal = useRef<Pivot | null>(null);
          const [listaPrincpal, setListaPrincpal] = useState([]);     
 
     const reportPrincipal = {
         dataSource: {
           data: listaPrincpal,
         },
         slice: {
           rows: [
             {uniqueName: "nome" },
             {uniqueName: "aniversario" }
           ]
         }
       };
                 <Pivot
                   ref={pivotPrincipal}
                   toolbar
                   report={reportPrincipal}
                   height="450"
                 />
     }

A chamada agora está assim:

export const pesquisaPrincipal = (item: PesquisaGusa) => {
  Promise.all([
    pesquisa(item).then(resp => {
      if (resp && resp.principal.length > 0) {
        pivotPrincipal.current.flexmonster.customizeCell(() => {});

        pivotPrincipal.current.flexmonster.setReport(pivotPrincipal.current.props.report);
		pivotPrincipal.current.flexmonster.customizeCell(customizeCellGusaPrincipalConvertedor);
		
		pivotMediaDesvioPadrao.current.flexmonster.setReport(pivotMediaDesvioPadrao.current.props.report);
        tamanhoDataPrincipalGusa = resp.contadorPrincipal;  
      }
    }),
  ]).then(() => {  
    isRegistros = false;
  });
}

Como resolver ou qual a melhor maneira de utilizar ?