Create a toolbar with custom buttons for the default layout

const renderToolbar = (Toolbar: (props: ToolbarProps) => ReactElement) => (
    <Toolbar>
        {(slots: ToolbarSlot) => {
            const { ZoomOut } = slots;
            return (
                <div
                    style={{
                        alignItems: 'center',
                        display: 'flex',
                    }}
                >
                    <div style={{ padding: '0px 2px' }}>
                        /* Custom zoom out button */
                        <ZoomOut>
                            {(props) => (
                                <button
                                    style={{
                                        backgroundColor: '#357edd',
                                        border: 'none',
                                        borderRadius: '4px',
                                        color: '#ffffff',
                                        cursor: 'pointer',
                                        padding: '8px',
                                    }}
                                    onClick={props.onClick}
                                >
                                    Zoom out
                                </button>
                            )}
                        </ZoomOut>
                    </div>
                    ...
                </div>
            );
        }}
    </Toolbar>
);

const defaultLayoutPluginInstance = defaultLayoutPlugin({
    renderToolbar,
});