Maintain generated data from parent component to child components in tabs

Question

I have a component that renders 4 navigation tabs. There is a color filter that filters what colors are presented in the tabs. (held as a list of strings)

However, currently when I switch from tab to tab the filters default back to empty. For instance, assume that I am on tab 1 and add "red" to the filter. When I navigate to tab 2, the filter is empty again (doesn't have 'red').

Is there a way to hold the values in this filter (held as a string in the main component)? such that the values are passed as I navigate from tab to tab?

Here is a rough sketch of my current code:

const defaultColorCodes = [] as string[];
const HeadDetails: React.FC<{}> = () => {
    const [codes, setCodes] = useQueryParams({
        colorCodes: withDefault(ArrayParam, defaultColorCodes),
    });
    
    
    return (
      <NavigationDrivenTabs>
        <NavigationDrivenTab
          label="..."
          to={`...`}
          component={..'passes the string of filters'..}
        />
        <NavigationDrivenTab
          label="..."
          to={`...`}
          component={..'passes the string of filters'..}
        />
        <NavigationDrivenTab
          label="..."
          to={`...`}
          component={..'passes the string of filters'..}
        />
        <NavigationDrivenTab
          label="..."
          to={`...`}
          component={..'passes the string of filters'..}
        />
        <NavigationDrivenTab
          label="..."
          to={`...`}
          component={..'passes the string of filters'..}
        />
      </NavigationDrivenTabs>

Navigation tabs is a component I implemented that format react tabs,tab components