React: как сделать динамический суффикс в <input />, который будет двигаться вместе с набранным текстом

Задача
Необходимо сделать input с помощью React, в котором, после текста отображается какое то значение. Будем называть это значение суффиксом.

Условия
Cуффикс не должен подмешиваться к самому значению инпута, т.e. чтобы мы на каждый change эвент не брали строку и не отделяли этот суффикс, а потом все снова складывали

Суффикс во время ввода должен всегда быть виден

Суффикс может быть другим react элементом (например картинкой, или текстом)

Если мы передадим во время работы приложения новое значение пропа суффикса -- он должен нормально перерендериться, инпут не должен сломаться

Суффикс нельзя выделить, скопировать, как либо с ним провзаимодействовать. Он не должен перекрывать поле инпута

Поведение инпута никак не должно отличаться от обычного

https://habr.com/ru/articles/743768/

✍️ @React_lib