I'm currently working on a gatsby project and a little stuck with queries.

Situation: I have a query of 6 teams, I would like to have 6 different buttons and based on if one of the buttons is selected, my website will display only that team instead of all 6

Problem: I'm working with GraphQL query and I'm aware that the query changes only on build. So my method of using String interpolation doesn't work

Query:

query {
allFile(filter: childMarkdownRemark {frontmatter: {title: {eq: ${selectedTeam }}}}}) {
                      edges {
                        node {
                          relativePath
                          childMarkdownRemark {
                            frontmatter {
                              title
                              teamDesc
                              teamPara
                            }
                          }
                        }
                      }
                    }
                  }

In my case selectedTeam is just a react state that is being updated everytime one of the teams is being clicked. Example: const [ selectedTeam, setSelectedTeam ] = useState('Executives')

Is there no way I can work around this or do I need to manually create a conditional rendering?