How to make an knp paginator pagination with a SearchBar Live component in Symfony?

Question

I don't know how to work with a live component and a bundle

I use Symfony UX to make a simple Search Bar

<?php

namespace App\Twig\Components;

use App\Repository\ProgramRepository;
use Knp\Component\Pager\PaginatorInterface;
use Symfony\Component\HttpFoundation\Request;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\DefaultActionTrait;

#[AsLiveComponent]
final class ProgramsSearch
{
    use DefaultActionTrait;

    #[LiveProp(writable:true)]
    public ?string $query = null;


    public function __construct(private ProgramRepository $programRepository)
    {
        
    }



    public function getPrograms()
    {
        
        return $this->programRepository->getListQueryBuilder($this->query)->getQuery()->getResult();

    }
}

And I handle Pagination with knp paginator bundle in my controller

#[Route('/', name: 'index')]
    public function index(ProgramRepository $programRepository, PaginatorInterface $paginator, Request $request): Response
    {
        $programs = $paginator->paginate(
            $programRepository->createQueryBuilder('p'), 
            $request->query->getInt('page', 1), 
            4 
        );

        return $this->render('program/index.html.twig', [
            'programs' => $programs,
        ]);
    }

Separately each functionality works but I want it together

Do you know how can i make that ??