symfony : pagination + sort function

Question

I am fairly new to symfony and currently working on a school project, however I faced an issue when working with the Pagination bundle. Initially, the pagination feature work seamlessly on its own, however when I add the sort function I get this error :

Argument 2 passed to Knp\Bundle\PaginatorBundle\Twig\Extension\PaginationExtension::render() must be an instance of Knp\Bundle\PaginatorBundle\Pagination\SlidingPaginationInterface

The pagination function works correctly however once I click the sort function, I get that error. Also, the sort function works correctly if I remove the

 {{ knp_pagination_render(repas) }}

from the twig function, however together, it is a mess.

Pagination function :

public function index(RepasRepository $repasRepository,Request $request, PaginatorInterface $paginator): Response
{
   
    $Repository=$this -> getDoctrine () -> getRepository (repas::class);
    $repas= $Repository -> findAll();
    $repas = $paginator->paginate(
        $repas,
        $request->query->getInt('page',1),
        4
    );
    
    return $this->render('repas/showrepas.html.twig', [
        'repas' => $repas ]);
}

Sort by ID function :

public function Triid(Request $request)
    {
        $em = $this->getDoctrine()->getManager();

        $query = $em->createQuery(
            'SELECT e FROM App\Entity\Repas e 
            ORDER BY e.id' 
        );
            
    
        $rep = $query->getResult(); 

        return $this->render('repas/showbackrepas.html.twig', 
        array('repas' => $rep));
    
    }

Twig :

<div class="app-content">
        <div class="side-app">
            <div class="page-header">
                <h4 class="page-title">Data Tables</h4>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#"><i class="fe   fe-box mr-1"></i> Tables</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Data Tables</li>
                </ol>
            </div>



            <div class="row">
                <div class="col-md-12 col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="card-title">Data Tables</div>
                        </div>
                        <div class="card-body">


        <form role="search" id="nav-search-form" method="post" action="{{ path('trinom') }}">


        <div class="btn-toolbar" role="toolbar" aria-label="Programmatic control">
            <div class="btn-group btn-group-sm" aria-label="Set Select2 option">
                <button class="js-programmatic-set-val btn btn-outline-primary mr-1 mb-1">
                    Sort by Name
                </button>
            </div>
        </div>

        </form>

        <form role="search" id="nav-search-form" method="post" action="{{ path('triid') }}">


            <div class="btn-toolbar" role="toolbar" aria-label="Programmatic control">
            <div class="btn-group btn-group-sm" aria-label="Set Select2 option">
                <button class="js-programmatic-set-val btn btn-outline-primary mr-1 mb-1">
                    Sort by Id
                </button>
            </div>
            </div>

         </form>

                                <div class="table-responsive">

                                <table id="dataTable" class="table table-striped table-bordered" >

                                    <thead>
                                    <tr>
                                        <th class="wd-15p">Id </th>
                                        <th class="wd-15p">Name</th>
                                        <th class="wd-20p">Description</th>
                                        <th class="wd-15p">price</th>
                                        <th class="wd-10p">category</th>
                                        <th class="wd-25p">adresse</th>
                                        <th class="wd-25p">image</th>

                                        <th class="wd-25p">Update</th>
                                        <th class="wd-25p">Delete</th>


                                    </tr>

                                    </thead>
                                    {% for repa in repas %}

                                        <tbody>


                                    <tr>
                                        <td>{{ repa.id }}</td>
                                        <td>{{ repa.nom }}</td>
                                        <td> {{ repa.description }}</td>
                                        <td>{{ repa.price }}</td>
                                        <td>{{ repa.category }}</td>
                                        <td>{{repa.adresse}}</td>

                                        <td> <img src="{{ asset('uploads/' ~ repa.img ) }}" alt="img" class="fill" style="max-height: 150px; width: 120px;"> </td>                            
                                        <td><a href="{{ path('repas_edit', {'id': repa.id}) }}" class="btn btn-success">update</td>
                                        <td><a href="{{ path('repas_delete', {'id': repa.id}) }}" class="btn btn-danger">Delete</td>

                                    </tr>
                                    </tbody>

                                    
                                    {% endfor %}
                                    

                                </table>
                                <div style="float:right;">{{ knp_pagination_render(repas) }}
                                    </div>
                                

                            </div>

                        </div>

                        <!-- table-wrapper -->
                    </div>
                    <!-- section-wrapper -->
                </div>

            </div>
        </div>
    </div>