Как правильно создать рекурсивный компонент?

Question

[Амир]

У меня есть данные вида:

{
  name: "Name",
  required: true,
  type: "object",
  properties: [
    {
      name: "Name2",
      required: false,
      type: "object",
      properties: [
      {
        name: "Name3",
        required: false,
        type: "text"
      },
      {
        name: "Name4",
        required: false,
        type: "text"
      }
      ]
    },
    {
      name: "Name5",
      required: false,
      type: "text"
    }
  ]
}

Соответственно, вложенность может быть любой. Пытаюсь создать компонент, который бы рекурсивно рендерил эти данные:

import React, { Component } from 'react';

export default class PropertiesParser extends Component {
    render() {
        let propers = this.props.properties;
        if (propers) {
            switch (propers.type) {
                case "text":
                    return (
                        <div className="row">
                            <div className="col-md-2">
                                {propers.name}
                            </div>
                            <div className="col-md-10">
                                <input
                                    type="text"
                                    name={propers.name}
                                    required={propers.required}
                                    value="" />
                            </div>
                        </div>
                    );
                    break;

                case "object":
                    return (<div>{propers.properties.map(property => 
                        <PropertiesParser key={propers.Name + Math.random()} properties={property} />
                    )}</div>);
                    break;
            }

        }
    
        return (
            <div>
            </div>
        );
    }
}

Но когда я пытаюсь проверить работу данного кода, то он не работает а в консоли пишется ошибка:

Uncaught RangeError: Maximum call stack size exceeded

Когда вставил console.log(propers) в начало рендера, то консоль завалило повторяющимися объектами, т.е. если взять в пример вышеописанный объект, то в консоли я увижу кучу повторяющихся:

{name: "Name", required: true, properties: Array(2), type: "object"}
{name: "Name2", required: true, type: "object"}
...

И так далее. Что я делаю не так?