ReactJS props: not all props are displaying in the component when it is rendered by the parent component

Question

I created a custom <select> component in a separate react file dropdown.js and it should have <option> children, each with values and labels based on data fetched from the server. Each <option> should contain name of US States as labels and their respective codes as values for the value and key attributes.

E.g.

<select id="voter_state" aria-label="Choose State">
    <option defaultValue>Choose State</option>
    <option key="6" value=6>California</option>
    <option key="36" value=36>New York</option>
    ...
</select>

The App.js file should render the select component after it successfully fetched needed data from the server (via axios) with the following custom props: id, label, options. The first two props are successfully rendered while data for options is not displaying.

The needed elements are not showing

Server-side requests successfully responds with the needed data and can be displayed via console.log() in the App.js file. I also logged the updated state allStates after assigning new values from the GET request method getAll() of the data service module StateDataService. Here is my App.js code

import { Component } from 'react'
import ReactDOM from 'react-dom'
import 'bootstrap/dist/css/bootstrap.min.css'

import StateDataService from './services/states.service'
import Dropdown from './components/dropdown'

function extractValues(o, i) {
    let a = Object.values(o)
    return a[i]
}

class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            allStates: [],
        }
    }

    componentDidMount() {
        var options = []
        StateDataService
            .getAll()
            .then(res => {
                res.data.forEach((datum) => {
                    options.push({
                        value: extractValues(datum, 0),
                        label: extractValues(datum, 1)
                    })
                })
            })
            .then(() => {
                this.setState(() => {
                    return {
                        allStates: options
                    }
                })
            })
            .then(() => {
                ReactDOM.render(
                    <Dropdown choices={this.state.allStates} id="voter_state" label="Choose State" />,
                    document.getElementById("rut")
                )
            })
            .catch(err => {
                console.log(err)
            })
    }

    render() {
        return (
            <div>
                <div id="rut"></div>
            </div>
        )
    }
}

export default App

Here is the code for the dropdown.js component

import 'bootstrap/dist/css/bootstrap.min.css'

function Dropdown(props) {
    const choices = props.choices
    const dropdownItems = choices.forEach((choice) => 
        <option key={choice.value.toString()} value={choice.value}>{choice.value}</option>
    )

    return (
        <select className={props.id} aria-label={props.label}>
            <option defaultValue>{props.label}</option>
            {dropdownItems}
        </select>
    )
}

export default Dropdown