Kql search bar not applying

Elastic Stack Kibana
1

Hello ,
I am developing a cutomized kibana plugin and I added the kql search bar on the top , but my problem is that it is not applying the search bar on the visualized hits
Here is my try

const doAsyncSearch = async (strategy?: string, sessionId?: string) => {
    if (!indexPattern) return;
query = data.query.getEsQuery(indexPattern, []);
console.log("query in doAsync:", query);
    const req = {
      params: {
        index: indexPattern.title,
        body: {
          query,
        },
      },
    };
console.log("kbnQuery:", kbnQuery);
    // Submit the search request using the `data.search` service.
    setRequest(req.params.body);
    const searchSubscription$ = data.search
      .search(req, {
        strategy,
        sessionId,
      })
      .subscribe({
        next: (res) => {
            console.log("res:", res);
            setHits(res);
            const message = (
              <EuiText>
                Searched
              </EuiText>
            );
            notifications.toasts.addSuccess(
              {
                title: 'Query result',
                text: 'Query result',
              }
            );
            searchSubscription$.unsubscribe();
            if (res.warning) {
              notifications.toasts.addWarning({
                title: 'Warning',
                text: 'warning',
              });
            }
        },
        error: (e) => {
          notifications.toasts.addDanger({
            title: 'Failed to run search',
            text: e.message,
          });
        },
      });
  };

I don't know what I am doing wrong
Please help me
The resources are very very limited on developing customized plugin or with outdated references
Thank you in advance