Я пытаюсь использовать FieldArray на ReduxForm

Question

У меня есть сервис с вложенным массивом задач. В избыточной форме я пытаюсь найти задачу из службы. То есть, я хочу нажать на добавить Todo в форму службы, эта кнопка открывает поле со списком, чтобы показать список задач. Я хочу сделать это, но страница пуста.

Это моя модель service.js:

const mongoose = require('mongoose');
const { Schema } = mongoose;

const serviceSchema = new Schema({

     relatedTodos: 
        [{type: mongoose.Schema.Types.ObjectId, 
        ref:'todos'}]

      });

 mongoose.model('services', serviceSchema);

Мой ActionTodos.js:

 export const listTodos = () => async dispatch => {

  const res = await axios.get('/api/todos');
  dispatch({type: typestodos.LIST_TODOS, payload: res.data});
  }

от редуктора моегоindex.js:

import reducerTodos from './ReducerTodos';
export default combineReducers({
  listTodos: reducerTodos,
 });

my ReducerTodos.js:

 import { typesTodos} from '../actions/types';

 const INITIAL_STATE = {
  listTodos: [],
  todo: {},
  loading: false,
  errors: {}
 };

 export default function(state = INITIAL_STATE, action) {
   switch (action.type) {

 case typesTodos.LIST_TODOS :
        return{
          ...state,
          listTodos: action.payload
        };

     default:
      return state;
   }
}

И наконец мой serviceForm.jsx:

import React, { Component } from 'react';
import { reduxForm, Field,FieldArray} from 'redux-form';
import { Link } from 'react-router-dom';
import {listTodos} from '../../actions/ActionTodos';
import { connect } from 'react-redux';

class ServiceForm extends Component {

 renderArrayTodos = ({ fields, meta: { error } }) => (
      <ul>
        <li>
          <button type="button" onClick={() => fields.push()}>Add todo</button>
        </li>
            {fields.map((todos, index) =>
          <li key={index}>
            <button
              type="button"
              title="Remove Todo"
              onClick={() => fields.remove(index)}/>
             <Field
               name= 'relatedTodo'
               component={this.searchTodos}/>
               label: RelatedTodo
           </li>

         )}
         {error && <li className="error">{error}</li>}
       </ul>
     );
     searchTodos = ({ error,handleInputChange }) => (

       <div className="col-md-4 mb-3">
       <label >todos:</label>
       {handleInputChange && error && <span>{error}</span>}
       <select className="custom-select d-block w-100"  value={this.state.listTodos} 
 name="relatedTodos" onChange={this.handleInputChange} >

      { this.props.listTodos.map(todo => {

            return(
                    <option  key={todo._id}  value={todo._id}>name: {todo.name}</option>
                   )
                    })}
       </select>
       </div>

      );

 ArrayFieldTodos = props => {
      const { handleSubmit, pristine, reset, submitting } = props
       return(
         <form onSubmit={handleSubmit}>
         <FieldArray name="relatedTodos" component={this.renderArrayTodos} />
      <div>
        <button type="submit" disabled={submitting}>
           Submit
         </button>
         <button type="button" disabled={pristine || submitting} onClick={reset}>
        cleanValues
         </button>
       </div>
         </form>
       )
      }
 render() {
     const { handleSubmit, loading} = this.props;

if (loading) {
  return <span>loading...</span>;
}

return (
  <form onSubmit={handleSubmit}>

 <FieldArray
         name = 'relatedTodos'
          component ={this.ArrayFieldTodos}
          label = 'RelatedTodos'
               />

           <div>

       </div>

   <Link className='btn btn-light mr-2' to='/services'>
      Cancel
         </Link>
         <button className='btn btn-primary mr-2' type='submit'>
           {this.isUpdating ? 'Update' : 'Create'}
         </button>
      </form>
}

     function mapStateToProps(state){
       return{
        listTodos: state.listTodos.listTodos
       }
      }
      ServiceForm = connect(mapStateToProps,{listTodos})(ServiceForm);

 export default reduxForm({form:'service',validate:validations})(ServiceForm);

Это показывает мне эту ошибку:

TypeError: Невозможно прочитать свойство 'listTodos' со значением NULL

И это код с ошибкой:

<select className="custom-select d-block w-100" value={this.state.listTodos} name="relatedTodos" 
onChange={this.handleInputChange}> 

Что не так? Как я могу получитькод лучше?

Я хочу подключить сервис с todos