NetxJS не правильно показывает спец. знаки (<, > итд...)

Всем привет! Подскажите, пожалуйста, как рендерить специальные коды вместо символов на странице?

Пример:

const Component = () => {
    const username = '<Alex>' // Данные из сервера

    return (
        <>
         // Вывод &lt;Alex&gt; вместо <Alex>
         <input value={username} />
         // Так тоже не работает
         <div>{username}</div>
         // Так работает. Вывод: <Alex>
         <div>&lt;Alex&gt;</div>
        </>
    )
}

Проблема решается если использовать prop dangerouslySetInnerHTML, но dangerouslySetInnerHTML не работает с тегом <input />.