Dynamically use React Component based on data in an object

so I’m creating this menu as a fun project in React and I’ve finished the code to display/style the components, so now I’m setting it up to be dynamic and generate the menu based on a passed set of data.

My React project routes like this: “App /” -> “Tab /” -> Various components based on data.

The plan is to have a menu (“App /”) contain potentially multiple “Tab /”s of various inputs, such as date, text, number, range, etc

Lets say I use this dataset as an example:

        elements: [
            {
                type: "number",
                text: "Some Text Label",
                fields: [
                    {
                        text: "Some Text",
                        min: 0,
                        max: 50,
                        value: 25
                    },
                    {
                        text: "Some Text",
                        min: 25,
                        max: 75,
                        value: 50
                    },     
                ]
            },
            {
                type: "text",
                text: "Some Text Label",
                fields: [
                    {
                        text: "Some Text",
                        value: "Some Text Placeholder"
                    }   
                ]
            },
            {
                type: "number",
                text: "Some Text Label",
                fields: [
                    {
                        text: "Some Text",
                        min: 0,
                        max: 100,
                        value: 50
                    },   
                ]
            },
        ]

Within the “Tab /” component, I’d want to look through the elements to find the type of one element, then use the component that is ready for that element (for example, type: “number”, I would use “Number /” and then pass the fields as a prop to that component.

Something like this: “Number fields={insertdatahere}/>

I’m a total beginner when it comes to react, but I’ve tried a few ways myself and I feel like im just missing something because nothing is working. I was considering just having all of the Components manually placed inside the tab component and having them set as “Display: None” unless an element is present for that type.

thanks for any advice