Как добавить значок проверки с помощью MUI или Tailwind CSS ко всем выбранным значениям в раскрывающемся списке?

Я хочу добавить небольшой значок галочки рядом со значением, например: Операции ✓, если пользователь выбирает операции в раскрывающемся списке TopicList. TopicList — это компонент класса для получения данных из базы данных, которые состоят из: Операции, Массив, Повторение, Функция, Выбор. Если пользователь выбирает 2 разных значения, например: Операции ✓ Массив ✓ Повторение Функция Выбор. Как я могу изменить этот код, чтобы решить эту проблему? Вот изображение того, как бы я хотел, чтобы пользователь выбирал Array.

import axios from "axios";
import React, { useState } from "react";
import TopicList from "../Components/topicList";
import CheckIcon from '@mui/icons-material/Check';

function CreateEvent(success, message) {
  const navigate = useNavigate();
  const [selectedValues, setSelectedValues] = useState([]); // array to store selected values

  const getDataFromTopicList = (val) => {
    if (val !== "" && !selectedValues.includes(val)) {
      setSelectedValues([...selectedValues, val]);
    }
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.info(selectedValues); // selectedValues array contains all selected values from all TopicList components

    axios({
      method: "POST",
      url: BASE_URL + "events/submitEvent",
      data: {
        topicId: selectedValues,
      },

      headers: { "Content-Type": "application/json" },
    })
      .then((response) => {
        if (response.status === 200) {
          toast.success("Successfully Created", {
            position: toast.POSITION.TOP_CENTER,
          });
        } else {
          toast.error(response.data.message, {
            position: toast.POSITION.TOP_CENTER,
          });
        }
      })
      .catch((err) => {
        if (err.response) {
          toast.error(err.response.data.message, {
            position: toast.POSITION.TOP_CENTER,
          });
        } else {
          toast.error("Failed to Create", {
            position: toast.POSITION.TOP_CENTER,
          });
        }
      });
  };

  return (
    <div className = "">
      <div>
        <form
          onSubmit = {handleSubmit}
        >
          <h1>
            Create an Event
          </h1>
          <div>
            <div>
              <TopicList
                selectedValues = {selectedValues}
                getDataFromTopicList = {getDataFromTopicList}
              />
            </div>
          </div>
        </form>
      </div>
    </div>
  );
}

export default CreateEvent;

import axios from "axios";
import React from "react";
import CheckIcon from "@mui/icons-material/Check";

const BASE_URL = process.env.REACT_APP_BASE_URL;

export default class TopicList extends React.Component {
  state = {
    topics: [],
  };

  componentDidMount() {
    axios.get(BASE_URL + `events/topic`).then((res) => {
      const topics = res.data;
      this.setState({ topics });
    });
  }

  render() {
    return (
      <select required onChange = {(val) => this.getCat(val.target.value)}>
        {this.state.topics.map((topic) => (
          <option value = {topic.topicId}>
          {topic.topic}
          {this.props.selectedValues.includes(topic.topicId) && <CheckIcon style = {{ color: "green" }} />}
        </option>
        ))}
      </select>
    );
  }
}

🤔 А знаете ли вы, что...
JavaScript позволяет создавать мобильные приложения для iOS и Android с использованием фреймворков, таких как React Native и NativeScript.