I am trying to implement clearing input by clicking on icon. JSX is

<div><input type="text" value={someValueFromState}/><SomeIconComponent onClick={()=> clearInput()}/></div>

Icon is hidden by default and shown when input focused. However at the moment of click on icon input gets his focus lost and icon becomes hidden again, making register click event impossible. Is there any workaround ?