How to use the @webiny/app/plugins.renderPlugins function in @webiny/app

render({ form, loading, refreshPages }) {
            return (
                
                    
                        <div style="{{">
                            {loading &amp;&amp; }
                            {form &amp;&amp;
                                renderPlugins("forms-form-details-submissions", {
                                    form,
                                    refreshPages
                                })}
                        </div>
                    
                
            );
        }
    },

{({ submit, Bind, data, form }) => (
                        
                            
                                
                                    {renderPlugins(
                                        "pb-page-element-advanced-settings",
                                        { Bind, data, form },
                                        { wrapper: false, filter: pl => pl.elementType === type }
                                    )}
                                
                            
                            
                                Cancel
                                Save
                            
                        
                    )}

{pageDetails => (
                                            
                                                {renderPlugins("pb-page-details", {
                                                    refreshPages,
                                                    pageDetails,
                                                    loading
                                                })}
                                            
                                        )}

const Header = (props: Object) => {
    const {
        pageDetails,
        pageDetails: { page },
        refreshPages
    } = props;
    return (
        
            
                
                    {page.title}
                
                
                    {renderPlugins("pb-page-details-header-left", { pageDetails, refreshPages })}
                    {renderPlugins("pb-page-details-header-right", { pageDetails, refreshPages })}
                
            
        
    );
};

render({ pageDetails, loading, refreshPages }: WithPageDetailsProps) {
            return (
                
                    
                        
                            <div style="{{">
                                {loading &amp;&amp; }
                                {renderPlugins("pb-page-details-revision-content-preview", {
                                    pageDetails,
                                    refreshPages
                                })}
                            </div>
                        
                    
                
            );
        }
    },

export const AdminLayout = ({ children }: { children: React.Node }) => {
    return {renderPlugins("layout", { content: children })};
};

const Header = (props: Object) => {
    const {
        pageDetails,
        pageDetails: { page },
        refreshPages
    } = props;
    return (
        
            
                
                    {page.title}
                
                
                    {renderPlugins("pb-page-details-header-left", { pageDetails, refreshPages })}
                    {renderPlugins("pb-page-details-header-right", { pageDetails, refreshPages })}
                
            
        
    );
};

renderDraggable: ({ element, plugin, onClick }) => ({ connectDragSource }) => {
            return connectDragSource(
                <div>
                    <div>
                    <div>
                        {renderPlugins("pb-page-element-action", { element, plugin })}
                        <span>{plugin.name.replace("pb-page-element-", "")}</span>
                    </div>
                </div>
            );
        }
    })</div>

{({ data, loading }) => {
                const form = get(data, "forms.form.data") || null;
                return (
                    
                        {form && (
                            
                                {renderPlugins(
                                    "forms-form-details-revision-content",
                                    { refreshForms, form, loading },
                                    { wrapper: false }
                                )}
                            
                        )}
                    
                );
            }}

const DefaultEditorBar = React.memo(() => {
    return (
        
            
                {renderPlugins("pb-editor-default-bar-left")}
            
            {/*
            
                {renderPlugins("pb-editor-default-bar-center")}
            
            */}
            
                {renderPlugins("pb-editor-default-bar-right")}
            
        
    );
});