How to stop re rendering of Parent Component when navigated to nested route?

I have two urls

/soccer/teams

/soccer/teams/:team_id

In Teams.js I have a api call to get list of teams when mounted.

import React, { useEffect, useState } from 'react'
import { useSoccerStore } from '../../../zustand/store';
import api from '../../api/api';
import Skeleton from 'react-loading-skeleton';
import { NavLink, Outlet } from 'react-router-dom';

const Teams = () => {
    const [teams, setTeams] = useState([]);
    const currentSeason = useSoccerStore((state) => state.currentSeason);

    const fetchTeamsData = async () => {
        try {
            const result = await api.get(`soccer/teams/${currentSeason?.season_id}`);
            const teamdata = result.data?.data;

            if (teamdata) {
                setTeams(teamdata);
            }
        } catch (error) {
            console.error(error);
        }
    };

    useEffect(() => {
        console.log('ParentComponent mounted');
        fetchTeamsData();
    }, []);


    return (
        <>
            <div className="w-100 teams-section">
                <div className="team-nav row">
                    {
                        teams.length <= 0 
                        ? <Skeleton count={1} height={50} className='mb-1'/>
                        : teams.map((item) => (
                            
                            <div
                                className="col-lg-1 col-md-2 col-6"
                                key={item.id}
                            >
                                <NavLink
                                    to={`${item.id}`}
                                >
                                    <div className="team-nav-item" >
                                        <img
                                            src={item.team_logo_lg}
                                            alt={item.team_official_name}
                                        />
                                    </div>
                                </NavLink>
                            </div>
                        ))
                    }
                </div>

                <div className="team-body">
                    <Outlet />
                </div>
            </div>
        </>
    )
}

export default Teams

In Team.js I have individual team data

import React from 'react'
import { useParams } from 'react-router-dom';

const Team = () => {
    const { team_id } = useParams();
    console.log(team_id);
    
    return (
        <h1>Team {team_id}</h1>
    )
}

export default Team

The Problem:

When I go to /soccer/teams/1 url the teams list is also updating. I don’t want parent component to re render and hit that api. So that it only render child component.

{
    path: "/soccer",
    element: <Soccer />,
    children: [
      {
        index: true,
        element: <Navigate to="/soccer/standings" replace />,
      },
      {
        path: 'standings',
        element: <Standings />,
      },
      {
        path: 'teams',
        element: <Teams />,
        children: [
          {
            path: ":team_id",
            element: <Team />,
          }
        ],
      },
    ],
  }  

I tried implementing react-router-dom <Outlet/> so it doesn’t render parent component.

But it didn’t work