title: rc-select showing id not name, on second click on the same option
body: <p>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.</p>
  <p><a href="https://i.stack.imgur.com/ZuSJ1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZuSJ1.png" alt="first render" /></a></p>
  <p><a href="https://i.stack.imgur.com/W4wtR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W4wtR.png" alt="picker" /></a></p>
  <p><a href="https://i.stack.imgur.com/NdhI7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NdhI7.png" alt="second render" /></a></p>
  <p><a href="https://i.stack.imgur.com/nSGLk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nSGLk.png" alt="list after scond render" /></a></p>
  <p>This is done in <code>Sorting</code> conmponent and well there is not much hee to be broke i think</p>
  <pre><code>const options = {
    dropdownMatchSelectWidth: 350,
    listHeight: 500,
    dropdownAlign: { offset: [0, 1] },
    className: styles.optionName,
  };
  
  export const MediaCategoryDrawer = () =&gt; {
    const router = useRouter();
    const params = router.query;
    const dispatch = useDispatch();
    const [optionValue, setOptionValue] = useState&lt;string | undefined&gt;(&quot;&quot;);
    const pageNumber = 1;
    const PAGE_SIZE = 20;
    const categoriesToShow = pageNumber * PAGE_SIZE;
    const { t } = useTranslation();
  
    // const queryCheck =
    //   typeof params.query === &quot;string&quot; ? params.query.split(&quot;_&quot;)[0] : optionValue;
  
    const mediaCategoriesSelector = (state: IAppState) =&gt; {
      return state.media.mediaCategories;
    };
    const mediaCategories = useSelector&lt;IAppState, IMediaCategoryListModel&gt;(
      mediaCategoriesSelector
    );
  
    useEffect(() =&gt; {
      dispatch(getMediaCategories());
    }, [dispatch]);
  
    useEffect(() =&gt; {
      if (!params.category) return;
  
      const categoryNameFromUrl = mediaCategories.Entities.find(
        (entity) =&gt; entity.CategoryId === params.category
      )?.CategoryName;
  
      setOptionValue(categoryNameFromUrl);
    }, [params.category, mediaCategories]);
  
    const onCategoryChange = useCallback(
      (categoryId?: string) =&gt; {
        const splitId = categoryId?.split(&quot;_&quot;)[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(() =&gt; {
      return mediaCategories?.Entities?.slice(0, categoriesToShow - 1).map(
        (category, _) =&gt; {
          if (
            category.CategoryTypeCode === MediaCategoryType.Other &amp;&amp;
            params.type === &quot;categories&quot;
          ) {
            return (
              &lt;Option
                className={styles.optionName}
                key={category.CategoryName}
                value={category.CategoryId}
                id={category.CategoryId}
              &gt;
                {category.CategoryName}
              &lt;/Option&gt;
            );
          } else if (
            category.CategoryTypeCode === MediaCategoryType.Main &amp;&amp;
            params.type === &quot;genre&quot;
          ) {
            return (
              &lt;Option
                className={styles.optionName}
                key={category.CategoryName}
                value={category.CategoryId}
                id={category.CategoryId}
              &gt;
                {category.CategoryName}
              &lt;/Option&gt;
            );
          }
        }
      );
    }, [params.type, mediaCategories.Entities]);
  
    return (
      &lt;div&gt;
        &lt;Select
          {...options}
          placeholder={t(
            &quot;MEDIA_CATEGORY_DRAWER__ALL_GENRES_COLLECTIONS&quot;,
            &quot;All Genres &amp; Collections&quot;
          )}
          value={`${t(&quot;SELECT_CATEGORIES&quot;, &quot;Categories: &quot;)} ${
            optionValue === undefined
              ? t(&quot;ALL_CATEGORIES&quot;, &quot;All categories&quot;)
              : optionValue
          }`}
          onChange={(e) =&gt; onCategoryChange(e)}
        &gt;
          &lt;Option key=&quot;All&quot; value=&quot;All categories&quot;&gt;
            {t(&quot;ALL_CATEGORIES&quot;, &quot;All categories&quot;)}
          &lt;/Option&gt;
          {renderOption}
        &lt;/Select&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>