Dynamic Pagination in Symfony 4

I'm a beginner and I'm working on a symfony project. I am trying to implement a dynamic pagination when listing my teams. I followed a code that's using it associated with a dynamic search too but I don't want that I only want to get the pagination work. There's the variable PATH that I need to change but I have no clue how.

const PATH = name ? "/teams/search/" + name + "/" + pageNumber : "/teams/SearchAll/" + pageNumber;

I just want to display 6 teams per page without any search criteria.

TeamsController:

/**
     * @Route("/", name="app_teams_index", methods={"GET"})
     */
    public function index(TeamsRepository $teamsRepository, Request $request, PaginatorInterface $paginator): Response
    {
        $em = $this->getDoctrine()->getManager();
        $teams = $em->getRepository(Teams::class)->findAll();

        $teams = $paginator->paginate(
            $teams,
            $request->query->getInt('page', 1), 6
        );

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

Templates:Teams: index.html.twig

{% extends 'base.html.twig' %}

{% block title %}Teams{% endblock %}

{% block body %}
    <style>
        .imgTest {
            width: 60px;
            height: 60px;
        }
    </style>
    <h1>Teams</h1>

        <div class="row">

            <div class="col-lg-8" style="margin-left: 150px">
                <div class="row" id="teamHolder">

                </div>
            </div>

        </div>
        <div class="navigation">
            <nav class="blog-pagination justify-content-center d-flex">
                <ul class="pagination" id="navigationPaginated">
                </ul>
            </nav>
        </div>

    <script>
        var pageNumber = 1;
        const teamHolder = document.getElementById('teamHolder');
        const searchField = document.getElementById('searchBarTeam');
        const paginated = document.getElementById('navigationPaginated');
        function getTeams(e, pageNumber = 1) {
        const PATH = name ? "/teams/search/" + name + "/" + pageNumber : "/teams/SearchAll/" + pageNumber;
            fetch(PATH, {
                method: 'GET',
            }).then(res => res.json()).then((data) => {
                teamHolder.innerHTML = "";
                data.forEach(team => {
                    if (typeof (team) !== "object") {
                        paginated.innerHTML = "";
                        for (let i = 1; i <= team; i++) {
                            paginated.innerHTML += `<li class="page-item"><a class="page-link" href="#" onclick="getTeams(null,${i})">${i}</a></li>`;
                        }
                    } else {
                        teamHolder.innerHTML += `<div class="col-lg-5">
                    <div class="col-lg-10 col-md-15">
                        <div class="single_place">
                            <div class="thumb">
                                <img src="/teamlogos/5/${team.teamLogo}" alt="" />
                            </div>
                            <div class="place_info">
                                <p>${team.id}</p>
                                <p>${team.teamName}</p>
                                <p>${team.teamTag}</p>
                                <p>${team.teamMail}</p>
                                <p>${team.teamReg}</p>
                            </div>
                        </div>
                    </div>
                    </div>`
                    }
                })
            }).catch((err) => console.log(err))
        }
        getTeams(null)
    </script>

{% endblock %}

Error: Failed to fetch data