I am using the react-mentions library in my React project, where there are two main components: MentionInput and Mention. I need to change the text color of the selected item from the suggestion list. However, whenever I try to apply the styling, it becomes evident that there are two texts written with different color in background.

All I need to do is highlight the selected username in the input text with a different color. Here is the issue visible:

Below is the relevant styling code I’m using:

.mentions--multiLine .mentions__control {
  font-family: monospace;
  font-size: 14pt;
  border: 1px solid silver;
}
.mentions--multiLine .mentions__highlighter {
  padding: 9px;
}

.mentions--multiLine .mentions__input {
  padding: 7px;
  min-height: 63px;
  outline: 0;
  border: 0;
}

.mentions__mention {
  color: #ff0000
}

JS components:

<MentionsInput
      value={this.state.value}
      onChange={this.handleChange}
      markup="@{{__type__||__id__||__display__}}"
      placeholder="Type anything, use the @ symbol to tag other users."
      className="mentions"
    >
      <Mention
        type="user"
        trigger="@"
        data={userMentionData}
        className="mentions__mention"
      />
    </MentionsInput>