I'm building a Next.js 14 application that integrates two separate third-party APIs, both of which use some of the same query parameters. My goal is to display a point on a map (using MapComponent) with additional interactive elements (like pins and signals) based on the data from both APIs.

Currently, I'm thinking of using a SearchBar parent component that collects the user input for these queries and then passes down the props to child components, which make the API calls. Given that both APIs share some query values, would this approach of handling state and props in a single parent component (SearchBar) be considered a good practice? Or is there a better way to architect this, perhaps by separating the concerns differently?