rc-select showing id not name, on second click on the same option

Question

I have strange issue that rc-select picker is showing as a option id eery tyime option is selected twice. I am passing my id to url and from url, to get proper reposnse from API. And storing my category list names in redu state.

This is done in Sorting conmponent and well there is not much hee to be broke i think

const options = {
  dropdownMatchSelectWidth: 350,
  listHeight: 500,
  dropdownAlign: { offset: [0, 1] },
  className: styles.optionName,
};

export const MediaCategoryDrawer = () => {
  const router = useRouter();
  const params = router.query;
  const dispatch = useDispatch();
  const [optionValue, setOptionValue] = useState<string | undefined>("");
  const pageNumber = 1;
  const PAGE_SIZE = 20;
  const categoriesToShow = pageNumber * PAGE_SIZE;
  const { t } = useTranslation();

  // const queryCheck =
  //   typeof params.query === "string" ? params.query.split("_")[0] : optionValue;

  const mediaCategoriesSelector = (state: IAppState) => {
    return state.media.mediaCategories;
  };
  const mediaCategories = useSelector<IAppState, IMediaCategoryListModel>(
    mediaCategoriesSelector
  );

  useEffect(() => {
    dispatch(getMediaCategories());
  }, [dispatch]);

  useEffect(() => {
    if (!params.category) return;

    const categoryNameFromUrl = mediaCategories.Entities.find(
      (entity) => entity.CategoryId === params.category
    )?.CategoryName;

    setOptionValue(categoryNameFromUrl);
  }, [params.category, mediaCategories]);

  const onCategoryChange = useCallback(
    (categoryId?: string) => {
      const splitId = categoryId?.split("_")[0];
      console.log(categoryId);
      console.log(splitId);
      setOptionValue(splitId);

      router.replace({
        search: UrlHelper.joinQueries(params, {
          id: categoryId,
          category: categoryId,
          sort: params.sort,
        }),
      });
    },
    [params.sort]
  );

  const renderOption = useMemo(() => {
    return mediaCategories?.Entities?.slice(0, categoriesToShow - 1).map(
      (category, _) => {
        if (
          category.CategoryTypeCode === MediaCategoryType.Other &&
          params.type === "categories"
        ) {
          return (
            <Option
              className={styles.optionName}
              key={category.CategoryName}
              value={category.CategoryId}
              id={category.CategoryId}
            >
              {category.CategoryName}
            </Option>
          );
        } else if (
          category.CategoryTypeCode === MediaCategoryType.Main &&
          params.type === "genre"
        ) {
          return (
            <Option
              className={styles.optionName}
              key={category.CategoryName}
              value={category.CategoryId}
              id={category.CategoryId}
            >
              {category.CategoryName}
            </Option>
          );
        }
      }
    );
  }, [params.type, mediaCategories.Entities]);

  return (
    <div>
      <Select
        {...options}
        placeholder={t(
          "MEDIA_CATEGORY_DRAWER__ALL_GENRES_COLLECTIONS",
          "All Genres & Collections"
        )}
        value={`${t("SELECT_CATEGORIES", "Categories: ")} ${
          optionValue === undefined
            ? t("ALL_CATEGORIES", "All categories")
            : optionValue
        }`}
        onChange={(e) => onCategoryChange(e)}
      >
        <Option key="All" value="All categories">
          {t("ALL_CATEGORIES", "All categories")}
        </Option>
        {renderOption}
      </Select>
    </div>
  );
};