Поиск с подсветкой

// Данные документов
const documents = [
    { id: 'F0100111', name: 'ПОДАТКОВА ДЕКЛАРАЦІЯ ПРО МАЙНОВИЙ СТАН І ДОХОДИ' },
    { id: 'F0100703', name: 'ПОДАТКОВА ДЕКЛАРАЦІЯ з податку на прибуток підприємств' },
    { id: 'F0102003', name: 'ЗАЯВА про застосування спрощеної системи оподаткування' },
    { id: 'F0102103', name: 'РОЗРАХУНОК доходу за попередній календарний рік, що передує року переходу на спрощену систему оподаткування' },
    { id: 'F0103306', name: 'ПОДАТКОВА ДЕКЛАРАЦІЯ ПЛАТНИКА ЄДИНОГО ПОДАТКУ ФІЗИЧНОЇ ОСОБИ - ПІДПРИЄМЦЯ' },
    { id: 'F0111611', name: "РОЗРАХУНОК суми податку, на яку зменшуються податкові зобов'язання з податку на доходи фізичних осіб,у зв'язку з використанням права на податкову знижку" },
    { id: 'F0121211', name: "РОЗРАХУНОК податкових зобов'язань з податку на доходи фізичних осіб та військового збору" },
    { id: 'F0121411', name: "РОЗРАХУНОК податкових зобов'язань з податку на доходи фізичних осіб та військового збору з доходів отриманих самозайнятою особою" },
    { id: 'F0121611', name: "РОЗРАХУНОК суми податку, на яку зменшуються податкові зобов'язання з податку на доходи фізичних осіб, у зв'язку з використанням права на податкову знижку" },
];
 
// Создаёт выделение текста
const MarkUp = (props) => (<span dangerouslySetInnerHTML={{__html:props.HTML}}></span>)
 
// Рендерит список документов
const DocsList = () => {
    const [searchDocName, setSearchDocName] = React.useState('');
    
    // получает пользовательский ввод
    const handleChange = event => {
        setSearchDocName(event.target.value);
    };
 
    // отменяет перезагрузку страницы при подтверждении формы
    const handleSubmit = event => {
        event.preventDefault()
    };
 
    // выполняет поиск и подсвечивает совпадающие символы
    const searchResults = !searchDocName
        ? documents
        : documents.filter(doc =>
            doc.name.trim().toLowerCase().includes(searchDocName.trim().toLowerCase())
        )
        .map(doc => {
            // находит подстроку в поисковом запросе и выделяет её
            let markedDocName = doc.name.replace(
                new RegExp(searchDocName, 'gi'),
                match => `<mark style='background: #2769AA; color: white;'>${match}</mark>`
            );
                return {
                    ...doc,
                    id: doc.id,
                    name: markedDocName,
                }
            });
 
    return (
          <RadioGroup name='value' value={active ? active : ''} onChange={handleSelection}>
              {searchResults.map(doc => (
              <FormControlLabel className={classes.item}
                                  style={{margin: 0}}
                                  label={
                                      <Box className={classes.label}>
                                          <Box className={classes.documentId}>
                                              <span>{doc.id}</span>
                                          </Box>
                                          // подсветка результата поиска
                                          <span className={classes.documentName}>
                                              <MarkUp HTML={doc.name}/>
                                          </span>
                                      </Box>
                                  }
                                  key={doc.id}
                                  value={doc.id}
                                  control={<Radio style={{marginTop: -2}} color='primary'/>}/>
              ))}
          </RadioGroup>
        </Paper>
    );
};
 
 
export default DocsList;