Я создаю редактируемое текстовое поле , используя Material-UI и React.
Когда вы находитесь вне текстового поля, оновыглядит как div или span элемент: 
Но когда вы mouseover это, появляется значок редактирования:
И когда вы щелкнете по нему, сообщение станет похожим на классическое текстовое поле: 
У меня проблема в том, что все работает нормально, за исключением того, что я не могу нажать на иконку редактирования (она становится мигающей )
Я делюсь тем, что уже сделал: https://codesandbox.io/s/jny3704v63
Я знаю источник проблемы, но не знаю, как ее исправить!Проблема в том, что когда вы mouseover значок редактирования, мы находимся в событии mouseout текстового поля, и будет выполнена функция handleMouseOut.
Вы можете проверитьчто, комментируя содержимое handleMouseOut, но значок не исчезнет, когда вы покинете текстовое поле!
Есть идеи?