title: Filtering items with Ant Design List and Radio Group
body: <p>I would like to create a filter with Ant Design List and Radio Group. When the app is initially loaded I would like to display all items. When a radio button is selected I would like to display only the choices which correspond to its value. I have the following code:</p>
  <pre><code>const data = [
    {
      edges: [
        {
          node: {
            name: &quot;A One&quot;
          }
        }
      ],
      category: &quot;A&quot;
    },
    {
      edges: [
        {
          node: {
            name: &quot;B One&quot;
          }
        },
        {
          node: {
            name: &quot;B Two&quot;
          }
        }
      ],
      category: &quot;B&quot;
    }
  ];
  
  const ArticlesFilter = () =&gt; {
    const options = data.map((item) =&gt; ({
      label: item.category,
      value: item.category
    }));
  
    const [value, setValue] = useState(&quot;&quot;);
    const [articles, setArticles] = useState(data);
  
    const filterArticles = (data) =&gt;
      data.filter((item) =&gt; item.category === value);
  
    const onChange = (e) =&gt; {
      setValue(e.target.value);
      setArticles(filterArticles(data));
    };
  
    const renderItem = (data) =&gt;
      data.edges.map((item) =&gt; (
        &lt;List.Item&gt;
          &lt;Card bordered={false} style={{ width: &quot;100%&quot; }}&gt;
            {item.node.name}
          &lt;/Card&gt;
        &lt;/List.Item&gt;
      ));
  
    return (
      &lt;&gt;
        &lt;Radio.Group
          options={options}
          onChange={onChange}
          value={value}
          optionType=&quot;button&quot;
        /&gt;
        &lt;List dataSource={articles} renderItem={renderItem} /&gt;
      &lt;/&gt;
    );
  };
  </code></pre>
  <p>The problem is that when I select any option for the first time (A or B), no data is displayed at all. When I select any other option next, the data is displayed filtered by the previous value instead of the current value.</p>
  <p>Here is the link to my <a href="https://codesandbox.io/s/antd-radio-group-filter-dryrs?file=/src/index.js:149-1382" rel="nofollow noreferrer">codesandbox</a>. I've added console log to my <code>onChange()</code> function and the render method, and they show different values as well. Where is my mistake? I would really appreciate your help.</p>