New to jsonforms. have a question about multiple custom renderes

General
1

I have 2 different, but kinda of similar renderes

const renderers = [
…materialRenderers,
//register custom renderers
{ tester: contactPickerManagementControlTester, renderer: ContactPickerManagementControl },
{ tester: peoplePickerManagementControlTester, renderer: PeoplePickerManagementControl }

];

pretty much quite equal, but differs on properties on control and on tester.

The renderer goes into an eternal loop for one of the controls.

Got some tips on how to find out why? they are practically the same but differ on properties for the PeoplePicker control contact | user

export const ContactPickerManagement: React.FunctionComponent = ({ id, updateValue, label, defaultSelectedUserIds }) => {

console.log(id, "inside ContactPickerManagement");


const handleSelectionChanged = (e) => {
    updateValue(e.target.selectedPeople);
};

return (
    <div key={`${id}_ContactPicker-div`}>
        <p className={styles.labelForControl}>{label.replace(/([A-Z])/g, ' $1').trim()}</p>
        <PeoplePicker placeholder={'Start writing the persons name or email'} allowAnyEmail={true} type={PersonType.person} userType={UserType.user} defaultSelectedUserIds={defaultSelectedUserIds} selectionMode="multiple" key={`${id}_ContactPicker`} selectionChanged={handleSelectionChanged}></PeoplePicker>
    </div>
);

};

export const ContactPickerManagementControl: React.FunctionComponent = ({ data, handleChange, path, id}: ContactPickerManagementControlProps) => {
const [defaultSelectedUserIds, SetDefaultSelectedUserIds] = useState<string>();

useEffect(() => {
    try {
        SetDefaultSelectedUserIds(data ? data.map(element => {
            return element.id;
        }) : []);

    } catch (error) {
        SetDefaultSelectedUserIds([]);
    }
}, []);

const handleChangeInControl = (pathToSchema: string, value: any) => {
    console.log(value);
    handleChange(pathToSchema, value);
};

return (
    <ContactPickerManagement
        defaultSelectedUserIds={defaultSelectedUserIds}
        label={path}
        id={id}
        // value={data}
        updateValue={(newValue: any) => handleChangeInControl(path, newValue)}
    />);

};

export default withJsonFormsControlProps(ContactPickerManagementControl);

export default rankWith(
3, //increase rank as needed

// or(…contactTester)
scopeEndsWith(‘CounterpartyResponsibleForDailyBusiness’)

);

[original thread by Ole Bergtun]