Как показать мигающий курсор в пользовательском интерфейсе TextField только для чтения в React JS

Question

Я установил TextField равным readOnly, так как я не хочу, чтобы клавиатура телефона всплывала, когда пользователь нажимает на нее, вместо этого у меня есть пользовательская клавиатура для ввода. Все работает отлично, кроме мигающего курсора, который обозначает, что поле доступно для редактирования. Веб-приложение предназначено только для мобильных браузеров.

<TextField
    error={globalContext.isInputError}
    value={globalContext.amount}
    multiline={false}
    autoFocus
    placeholder={Math.abs(globalContext.balanceDue).toString()}
    helperText={
        <Typography variant="caption" className={classes.input} display="block">
            {globalContext.inputHelperText}
        </Typography>
    }
    margin="normal"
    InputProps={{
        startAdornment: (
            <InputAdornment position="start" classes={{ positionStart: classes.centerAdornment }}>
                <Typography variant="h6" display="block">
                    ₹
                </Typography>
            </InputAdornment>
        ),
        readOnly: true,
        style: { fontSize: '22px', fontWeight: 'bold' }
    }}
    className={classes.input}
/>

Как отобразить мигающий курсор в TextField?