I'm trying to think of an infrastructure architecture to implement and use on my application. Basically I have a page with multiple components. enter image description here

the filters and filter options are fetched from an API like this:

const filter1 = [
  {
    id: "id",
    name: "OPTION 1",
  },
  {
    id: "id2",
    name: "OPTION 2",
  },
];

The below components needs to send an API request each of them with the filters selected.

The initial components request needs to be done only when the filters and their defaults value are set so that the API request to get the component data will be with the correct filters.

So far I tried to think about ContextProvider which will store all of my filters state, and then all of the components using it will use the context and the state to make an API call.

But there are still a few problems with it, 1: I need to think of a way to set all of the filters default values both in the ContextProvider and in the filter state to present the default value selected. 2. I need to prevent the components from performing an API request until all of the default values are populated in the ContextProvider and shown in the filters.

the default values also needs to come from the API.

Am I even thinking about it the right way? What am I missing to make it sensible and easy to code?