как получить данные из Firebase, чтобы выбрать тег в reactjs

Question

это мой код, я просто хочу получить данные из firebase, чтобы направить их в тег выбора, но данные не отображаются, может ли какое-либо тело помочь мне в этом, вот мой код.

Вместо тега выбора, который я использовал тег абзаца, затем данные отображаются, но я хочу отобразить в теге выбора

вот мой код выборки, он не показывает никаких ошибок, чтобы я не получил свой вывод, если какой-либо текст нет, в чем моя ошибка, пожалуйста, дайте мне знать какую ошибку я делаю Спасибо, я заранее.

<div className="col s12 m6">
            {
                this.state.topic && this.state.topic.map( topics =>{
                    return (
                        <div>

                          <select>
                            {
                              this.state.topic && this.state.topic.map(
                                (topic)=> <option value={topic.topic}>{topic.topic.value}</option>
                              )
                            }
                          </select>

                        </div>
                    )

                })
            }
        </div>

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createAssignment } from '../../store/actions/projectActions'
import { Redirect } from 'react-router-dom'
import { firestoreConnect } from 'react-redux-firebase'
import { compose } from 'redux'
import { db } from '../../config/fbConfig'


class CreateAssignment extends Component {
  state = {
    topic: '',
    assignment:''
  }
  handleChange = (e) => {
    this.setState({
      [e.target.id]: e.target.value
    })
  }
  handleSubmit = (e) => {
    e.preventDefault();
    // console.log(this.state);
    this.props.createAssignment(this.state);
    this.setState ({
      topic:'',

      assignment:''

    })
  }

   componentDidMount(){
       db.collection('projects')
         .get()
         .then(snapShot =>{
             const topic = []

             snapShot.forEach (doc =>{
                 const data = doc.data()
                 topic.push(data)
             })
             this.setState({topic: topic})
             console.log(snapShot)

         })
         .catch(error => console.log(error))
   }
  render() {
    const { auth, projects } = this.props;
    if (!auth.uid) return <Redirect to='/signin' /> 

    return (
      <div className="container">
        <div className="col s12 m6">
            {
                this.state.topic && this.state.topic.map( topics =>{
                    return (
                        <div>

                          <select>
                            {
                              this.state.topic && this.state.topic.map(
                                (topic)=> <option value={topic.topic}>{topic.topic.value}</option>
                              )
                            }
                          </select>

                        </div>
                    )

                })
            }
        </div>
        <form className="white" onSubmit={this.handleSubmit}>
          <h5 className="grey-text text-darken-3">Create New Assignment</h5>


          <div className="input-field">
            <input type="text" id='assignment' onChange={this.handleChange} />
            <label htmlFor="assignment">Assignment</label>
          </div>
          <div className="input-field">
            <button className="btn pink lighten-1">Create</button>
          </div>
        </form>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  // console.log(state);

  return {
    projects : state.firestore.ordered.projects,
    auth: state.firebase.auth
  }
}

const mapDispatchToProps = dispatch => {
  return {
    createAssignment: (project) => dispatch(createAssignment(project))
  }
}

export default compose(
  connect(mapStateToProps,mapDispatchToProps),
  firestoreConnect([{
    collection: 'projects'
  }])
)(CreateAssignment)