使用React从API填充选择选项？

Question

我尝试使用来自API的一些JSON响应来创建下拉列表。这是我所拥有的一个例子：

class Test extends Component {
constructor() {
    super();
    this.state = {
        numbers: [],
    };
}

componentDidMount() {
    fetch('https://randomuser.me/api/?results=500')
        .then(results => {
            return results.json();
        }).then(data => {
            let result = data.results.map((cellNumbers) => {
                return ( 
                    <div key={cellNumbers.cell}>
                        {cellNumbers.cell}
                    </div>
                )
            })
            this.setState({ numbers: result });
        }).catch(function(err) {
            console.log("Fetch error: ", err);
        });
}
render() {
    return ( 
        <div> {this.state.numbers} </div>
    )
    }
}

export default class Tests extends Component {
    render() {
        return ( 
            <div className="row" >
                <div className="col-md-12 buttonCustom" >
                    <select>
                        <option value={<Test />}><Test /></option>
                    </select>
                </div> 
            </div>        
        );
    }
}

现在，下拉列表不会将不同的cellNumber值彼此分开，因此它是一个大的下拉列表，所有数字都作为一个选项。我怎么能把它分开呢？我知道有一个npm包反应选择，但我想知道是否有办法在没有其他包的情况下这样做？