I am working on an app in which I want to render a component based on the value I am getting from the API. The returned value is a string and can have space in between. So I have made an object (with demo data for simplicity) that has keys as strings and values as components like this

const conditions = {
    First: {"one" : <Component1 />, "two": <Component2 />},
    Second: {
        "var one": {"one": <Component3 />, "two": <Component5 />},
        "var two": {"one": <Component4 />, "two": <Component8 />},
        "var three": {"one": <Component7 />, "two": <Component5 />},
        "var four": {"one": <Component2 />, "two": <Component1 />}
    },
    Third: <Component6 />,
    Four: <Component7 />,
    Five: {
        "var six": <Component1 />
        "var seven": <Component5 />
        "var eight": <Component4 />
        "varr nine": <Component7 />
        "var ten": <Component8 />
        "var eleven": <Component1 />
    },
    Six: <Component4/>
}

So far I have tried using a recursive function containing a for-in loop to iterate the object and check if the value of the current key is an object or not but a component is also an object so it just keeps going instead of returning the value i.e component itself. And I have tried checking if the key of the value object is a string but then the returned component's first key which is $$typeof is also a string.

const getValue = (obj) => {
  for (const key in obj) {
     if (key === 'apiVariablestring') {
        if (Object.keys(obj[key])[0] === 'string') {
                getValue(obj[key]);
        } else {
          //should return component here but else will never run
        }
     }
  }
}

I am not sure this is the best way to do it I have not done this before and I am new when it comes to dealing with API. If there's a better way please tell me.

My expected output should be a component that I will store in a react state using the useState hook. So in last, I'll have a variable let's say currentValue and I could render {currentValue}

The API returned value is something like this

"something": [
  {
    "id": 01,
    "main": "Second",
    "description": "var two",
    "stuff": "one"
  }
]

And I want to match main, description and stuff. Main is unique but the description and stuff can be same and repeated in the object that I made.