Displaying a component on clicking a word in a TextField?

Question

React

Good afternoon! The problem is this, there is a task to display the component (drop-down list) by clicking on the word in the Input field. A sentence will be entered in the field, and then the user clicks on a certain word in it and a drop-down list should open.
For styles, I use the Material UI library.
The component code looks like this:

function Content(props) {
    const { classes } = props;

    return (
        <Paper className={classes.paper}>
            <AppBar className={classes.searchBar} position="static" color="default" elevation={0}>
                <Toolbar>
                    <Grid container spacing={16} alignItems="center">
                        <Grid item xs>
                            <TextField
                                fullWidth
                                placeholder="Введите фразу которую нужно обучить"
                                InputProps={{
                                    disableUnderline: true,
                                    className: classes.searchInput,
                                }}
                            />
                        </Grid>
                        <Grid item>
                            <Button variant="contained" color="primary"  className={classes.addUser}>
                                Обучить
                            </Button>
                            <Tooltip title="Сбросить">
                                <IconButton>
                                    <RefreshIcon className={classes.block} color="inherit" />
                                </IconButton>
                            </Tooltip>
                        </Grid>
                    </Grid>
                </Toolbar>
            </AppBar>
            <div className={classes.contentWrapper}>
                <Typography color="textSecondary" align="center">
                    Пока ничего не было обучено
                </Typography>
            </div>
        </Paper>
    );
}