title: how generate options for select component dynamically with ant design
body: <p>i am using ant design with react to generate an editable table with a select option inside it
  i will fetch the select options using a hook (figbird) which will take some time to fetch but the select will render with no option inside it .
  i tried to but the data ( an array of Options) inside a state like this</p>
  <pre><code>const lines = useFind(&quot;lines&quot;);
  let [lineNumber, setLineNumber] = useState();
  const options = {
      lines: [],
    };
  
    if (lines.error) return &quot;Failed to load resource Machine Status&quot;;
    if (lines.status === &quot;loading&quot;) {
      options.lines[0] = {};
      setLineNumber[0] = { value: &quot;loading&quot; };
    } else {
      let arr = lines.data.map((line, i) =&gt; {
        console.log(i, line);
        options.lines[i] = {};
        return { value: line.line_number };
      });
      setLineNumber = arr;
    }
  </code></pre>
  <p>and then render my table and select component inside it</p>
  <pre><code>     &lt;Formik
            initialValues={{ machine_name: &quot;&quot;, password: &quot;&quot;, remember: false }}
            validationSchema={LoginSchema}
            onSubmit={onSubmit}
          &gt;
            {({ values, handleSubmit }) =&gt; (
              &lt;Form {...layout} onSubmit={handleSubmit}&gt;
                &lt;Form.Item name=&quot;machine_name&quot; label=&quot;Name&quot;&gt;
                  &lt;Input
                    name=&quot;machine_name&quot;
                    placeholder=&quot;Machine Name&quot;
                    prefix={&lt;TagOutlined /&gt;}
                    value={values.machine_name}
                  /&gt;
                &lt;/Form.Item&gt;
                &lt;Form.Item name=&quot;machine_line&quot; label=&quot;Line&quot;&gt;
                  &lt;Select
                    prefix={&lt;ClusterOutlined /&gt;}
                    name=&quot;machine_line&quot;
                    style={{ width: &quot;100%&quot; }}
                    value={values.machine_line}
                  &gt;
                      {lineNumber.map((line) =&gt; {
                      return (
                        &lt;Option value={line.line_number}&gt;
                          {line.line_number}
                        &lt;/Option&gt;
                      );
                    })}
  
                  &lt;/Select&gt;
                &lt;/Form.Item&gt;
                &lt;Form.Item name=&quot;url&quot; label=&quot;URL&quot;&gt;
                  &lt;Input
                    name=&quot;url&quot;
                    placeholder=&quot;URL&quot;
                    prefix={&lt;LinkOutlined /&gt;}
                    value={values.url}
                  /&gt;
                &lt;/Form.Item&gt;
                &lt;Row&gt;
                  &lt;Col offset={6} span={4}&gt;
                    &lt;SubmitButton&gt;Submit&lt;/SubmitButton&gt;
                  &lt;/Col&gt;
                  &lt;Col offset={5} span={4}&gt;
                    &lt;ResetButton&gt;Reset&lt;/ResetButton&gt;
                  &lt;/Col&gt;
                &lt;/Row&gt;
                ,
              &lt;/Form&gt;
            )}
          &lt;/Formik&gt;
  
  </code></pre>
  <p>but the select still render nothing inside it ... i checked the data returnd from the fetch and it's coming with no error but the state seems like is not been set</p>