How to stop re-render the block when it loses focus?

This is a sample block I’m working on, it’s intended to use a simple form, not to work with React. The problem is with the block events Focus and Blur, when you click outside the block, the content is re-rendered and when it does that, the form loses the input value because there is no attribute assigned to this field to re-input the value. How can I prevent this re-render action?

I’ve tried to use shouldComponentUpdate() but it’s not calling this function.

(function(wp, $) {
	
	var blocks = wp.blocks;
	var el = wp.element.createElement;
	var withState = wp.compose.withState;
		
	blocks.registerBlockType('plugin/test', {
		
		title: 'Plugin Test',
		icon: 'universal-access-alt',
		category: 'layout',
	
		supports: {
			html: false,
		},

		// This is not working!!
		shouldComponentUpdate(nextProps, nextState) {
			console.log(nextProps, nextState);
			return this.state.editing ? false : true;
		},
					
		edit: withState({
			editing: false,
		})(function(props) {
			
			return el('div', {
				ref: function(container) {

					// How to stop re-render this and loses input value?
					$(container).html('<form><input type="text"></form>');

				}
			});
			
		}),
	
	    save: function() {
	        return null
	    }
	    
	});
	
})(window.wp, jQuery);