Custom textarea objects in React with controlled contentEditable

Question

I'm trying to create a textarea where on enter the input is converted to a custom component (e.g. email) as show below. Any suggestions on how to create this in react?

I have tried creating this using a contentEditable div with the values being appended to a list on enterkey pressed (as shown in image 2). However, then I can't make the div component controlled (for instance removing typed text on enter), nor appending emails correctly inside the controlled state.

Code (typescript react, stripped away css):

const [emails, setEmails] = useState<string[]>([]);
const [value, setValue] = useState<string>();

const onKeyPress = (e: any) => {
    if (e.charCode === 13 && value) {
        setEmails(
            [...emails, value]
        )
        setValue("");
    }
}
const onInputChange = (e: any) => {
    setValue(e.currentTarget.textContent)
}

return (
    <div>
        <div className="text-left flex ">
            <div className=" flex grow" suppressContentEditableWarning>
                {emails.map((email, id) => (
                    <div className="" key={id} contentEditable="false">
                        {email}
                    </div>
                )

                )}
                <div
                    suppressContentEditableWarning={true}
                    contentEditable={true}
                    className={classNames("grow flex")}
                    onKeyPress={onKeyPress}
                    onInput={onInputChange}
                >
                </div>
            </div>
        </div>
    </div>
)