export interface Tag {
    name: string;
    color: string;
}

const TradesColumnTag = ({tradeTags, tradeId, fetchTags, ofScreener}: TradesColumnTagPropsType) => {
  const [selectTags, setSelectTags] = useState<Tag[]>([]);
  const {diaryToken} = useAuthContext();
  const dispatch = useDispatch();
  const [newTag, setNewTag] = useState<string>("");
  const tags = useSelector((state: AppState) => state.tagsSlice.tags);
  const tradeTagsStore = useSelector((state: AppState) => state.tagsSlice.tradeTags[tradeId]);

  console.log(newTag);

  useEffect(() => {
    if(!tradeTagsStore) {
      dispatch(setTradeTags({tradeId, data: tradeTags}));
    }
  }, [tradeTags]);

  useEffect(() => {
    if(!tradeTagsStore) return;
    setSelectTags(tradeTagsStore.map(t => ({name: t.name, color: randomColor()})));
  }, [tradeTagsStore]);

  const createNewTag = (newTag: string) => {
    if (!diaryToken || newTag === "") return;

    createTag({name: newTag}, diaryToken)
      .then(data => {
        if (!data) return;

        setNewTag("");
        fetchTags();
      });
  };

  const randomColor = () => {
    const colors = ["#FFE9B8", "#D0E9D7", "#D6E6FF"];

    return colors[Math.floor(Math.random() * colors.length)];
  };

  const truncate = (str: any, n: number) => {
    if (str) return str.length > n ? str.substr(0, n) + "..." : str;
  };

  const handleTagDelete = (value: string) => {
    const deleteTagId = tags.find(t => t.name === value)?.id;

    if(deleteTagId) {
      deleteTag([deleteTagId]);
    }
  };

  const onKeyDownHandler = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter") createNewTag(e.target.value);
    setNewTag("");
  };

  return (
    <Box width="100%">
      <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>
    </Box>
  );
};

export default TradesColumnTag;

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