React function executing multiple times (4 times)

My function is executed 4 times ?

(I am using GrahQL, Appolo-Client, React)

One of the issues is that my query returns set of images, which are hosted on S3 and page keeps refreshing with new urls.

import React, { useState } from "react"
import { useQuery } from "@apollo/client"
import styled from "styled-components"
import useAuth from "../../hooks/useAuth"
import useProfile from "../../hooks/useProfile"

import GET_USER_TEAMS from "../../queries/teams/getUserTeamsPage"

import TeamsTab from "./TeamsTab"

import Container from "../../components/Container"
import WidthFitter from "../../components/WidthFitter"
import Button from "../../components/Button"
import Tabs from "../../components/Tabs"
import Loading from "../../components/Loading"

const tabLookup = (tab) => {
  const tabs = ["accepted", `pending`]
  const index = tabs.indexOf(tab)
  return index >= 0 ? index : 0
}

function MyTeams({ history }) {
  console.log('start')
  const params = new URLSearchParams(history.location.search)
  const { cognitoId } = useAuth()
  const { usage } = useProfile()
  const [activeTabIndex, setActiveTabIndex] = useState(
    tabLookup(params.get("tab"))
  )

  const { loading, error, data } = useQuery(GET_USER_TEAMS, {
    fetchPolicy: "network-only",
    variables: { cognitoId, ownerId: cognitoId }
  })

  if (error) return <Error>Oops... Something went wrong</Error>
  if (loading) return <Loading />

  const { userTeams, myStats } = data

  const acceptedTeams = userTeams.filter((m) =>
    m.memberships.some(
      (n) => n.user.cognitoId === cognitoId && n.state === "ACCEPTED"
    )
  )
  const pendingTeams = userTeams.filter((m) =>
    m.memberships.some(
      (n) => n.user.cognitoId === cognitoId && n.state === "APPLIED"
    )
  )

  const tabs = [
    `Accepted (${acceptedTeams.length})`,
    `Pending (${pendingTeams.length})`
  ]

  return (
    <>
      <Container>
        <WidthFitter>
          <Wrapper>
            <LeftColumn>
              <div style={{ display: "flex", alignItems: "center" }}>
                <Details>
                  <Name>My Teams</Name>
                </Details>
              </div>
            </LeftColumn>
            <RightColumn style={{ border: "none" }}>
              <Button
                onClick={() => history.push("/create-team")}
              >
                Create a Team
              </Button>
            </RightColumn>
          </Wrapper>
          <Tabs
            activeTabIndex={activeTabIndex}
            setActiveTabIndex={setActiveTabIndex}
            tabs={tabs}
          />
        </WidthFitter>
      </Container>
      <HR />
      <Container>
        <WidthFitter>
          <Wrapper>
            <LeftColumn>
              {activeTabIndex === 0 && (
                <TeamsTab
                  numSeats={usage?.plan.numSeats}
                  myStats={myStats}
                  teams={acceptedTeams}
                  acceptedTeams={acceptedTeams}
                />
              )}
              {activeTabIndex === 1 && (
                <TeamsTab
                  numSeats={usage?.plan.numSeats}
                  myStats={myStats}
                  teams={pendingTeams}
                />
              )}
            </LeftColumn>
          </Wrapper>
        </WidthFitter>
      </Container>
    </>
  )
}

// styles

const HR = styled.hr`
  border: 0;
  border-bottom: 1px solid ${({ theme }) => theme.colors.lightGrey};
  margin-top: 0;
  margin-bottom: 0;
`

const Name = styled.h2`
  font-size: 1.75em;
  margin: 0;
`

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  ${({ theme }) => theme.breakpoints.desktop} {
    justify-content: space-between;
    flex-direction: row;
  }
`

const RightColumn = styled.div`
  border-top: 1px solid ${({ theme }) => theme.colors.blue};
  border-left: none;
  padding-left: 0;
  ${({ theme }) => theme.breakpoints.desktop} {
    border-top: none;
    padding-left: 50px;
    border-left: 1px solid ${({ theme }) => theme.colors.red};
  }
`
const LeftColumn = styled.div`
  width: 100%;
`

const Details = styled.div`
  display: flex;
  flex-direction: column;
`

const Error = styled.p`
  color: ${({ theme }) => theme.colors.red};
`

export default React.memo(MyTeams)

I have removed <React.StrictMode> but it is still executing multiple times.

I was not able to make it to run just one time