import React, {useState, useEffect, KeyboardEvent} from "react";
import {Box, Checkbox, FormControl, Grid, Input, MenuItem, Select, TextField, Typography} from "@mui/material";

      <FormControl variant="standard" sx={{my: 1, width: ofScreener ? 160 : 250}}>
        <Select
          multiple
          input={<Input />}
          displayEmpty
          sx={{fontSize: ofScreener ? 11 : 13}}
          value={selectTags.map(s => s.name)}
          onChange={(e) => handleTagsChange(e.target.value as string[])}
          renderValue={(selected) => {
            const selectedTruncate: string[] = truncate(selected.toString(), ofScreener ? 16 : 22)?.split(",");

            if (selected.length === 0) {
              return <Typography fontSize={ofScreener ? 11 : 13} color="#a2a2a2">пробой уровня</Typography>;
            }

            return <Grid display="flex" >
              {selectedTruncate.map((value, index) => {
                return <span key={index}>
                  <Typography
                    sx={{
                      display: "flex",
                      alignItems: "center",
                      mr: .5,
                      fontSize: ofScreener ? "11px" : "13px",
                      color: "#000",
                      backgroundColor: randomColor(),
                      border: "none",
                      borderRradius: "2px",
                      boxSizing: "content-box",
                      padding: ofScreener ? "0 7px 0 7px" : "0 10px 0 10px",
                      "& svg": {
                        display: "none",
                      },

                      "&:hover": {
                        padding: ofScreener ? "0 2px 0 7px" : "0 2px 0 10px",
                        "& svg": {
                          zIndex: 10001,
                          display: "block",
                          fontSize: ofScreener ? "15px" : "18px",
                          cursor: "pointer",
                        },
                      },
                    }}
                  >
                    {value}
                    <CloseIcon onClick={() => handleTagDelete(value)} />
                  </Typography>
                </span>;
              })}
            </Grid>;
          }}
        >
          {tags.map((option) => (
            <MenuItem key={option.id} sx={{py: 0}} value={option.name}>
              <Checkbox checked={selectTags.map(s => s.name).indexOf(option.name) > -1} />
              <span style={{
                borderRadius: 3, marginLeft: 0, color: "#000", fontSize: ofScreener ? "11px" : "13px", padding: ofScreener ? "0 7px 0 7px" : "0 10px 0 10px",
                backgroundColor: selectTags.find(tag => tag.name === option.name)?.color || randomColor(),
              }}>
                {option.name}
                {
                  selectTags.find(t => t.name === option.name) &&
                    <span style={{marginLeft: 5, fontSize: ofScreener ? "10px" : "12px"}} >❌</span>
                }
              </span>
            </MenuItem>
          ))}

          <TextField
            value={newTag}
            onChange={(e) => setNewTag(e.target.value)}
            sx={{
              width: ofScreener ? 160 : 280, ml: 3.5, pt: 1, pb: 0.5,
              "& input": {fontSize: ofScreener ? "11px" : "13px"},
              "& :before": {borderBottom: theme =>`${ofScreener ? "1px" : "2px"} solid ${theme.palette.text.primary}`, opacity: 0.4},
            }}
            placeholder={"Новая причина"}
            variant="standard"
            onKeyDown={onKeyDownHandler}
          />
        </Select>
      </FormControl>


напиши точно такой же селект  без использования библиотеки MUI, используя только react.
Select должен быть точно таким же