relay fragment spread not working

I'm in the learning process of relay and facing a very wired issue. Relay is not returning the data from network response if I use fragment spread operator (actual data is returning from graphql, confirmed from the network tab). But if I define the field requirements in the query itself, it returns data.

This is index.js of the app:

import React from 'react'
import ReactDOM from 'react-dom'
import {
  graphql,
  QueryRenderer
} from 'react-relay'
import environment from './relay/environment'
import AllTodo from './components/AllTodo'

const query = graphql`
  query frontendQuery {
    ...AllTodo_todos
  }
`

ReactDOM.render(
  <QueryRenderer
    environment={environment}
    query={query}
    render={({ error, props }) => {
      if (error) return <div>{error}</div>
      else if (props) {
        console.log(props)
        return <AllTodo { ...props } />
      }
      else return <div>loading...</div>
    }}
  />,
  document.getElementById('root')
)

AllTodo component:

import React, { Component } from 'react'
import { graphql, createFragmentContainer } from 'react-relay'

class AllTodo extends Component {
  render() {
    return (
      <div>
        { this.props.todos.map(todo => {
          <div>{ todo.id } { todo.description }</div>
        }) }
      </div>
    )
  }
}

export default createFragmentContainer(AllTodo, graphql`
  fragment AllTodo_todos on RootQueryType {
    allTodos {
      id
      description
      complete
    }
  }
`);

Relay environment:

import {
  Environment,
  Network,
  RecordSource,
  Store,
} from 'relay-runtime'
import { BACKEND_URL } from '../../constants'

// a function that fetches the results of an operation (query/mutation/etc)
// and returns its results as a Promise:
function fetchQuery(
  operation,
  variables,
  cacheConfig,
  uploadables,
) {
  return fetch(BACKEND_URL + '/graphql', {
    method: 'POST',
    headers: {
      'content-type': 'application/json'
    },
    body: JSON.stringify({
      query: operation.text,
      variables,
    }),
  }).then(response => {
    return response.json();
  });
}

// a network layer from the fetch function
const network = Network.create(fetchQuery);

// export the environment
export default new Environment({
  network: network,
  store: new Store(new RecordSource())
})

The graphql schema:

schema {
  query: RootQueryType
  mutation: RootMutationType
}

type RootMutationType {
  # Create a new todo item
  createTodo(description: String): Todo

  # Update a todo item
  updateTodo(id: String, description: String, complete: Boolean): Todo

  # Delete a single todo item
  deleteTodo(id: String): Todo
}

type RootQueryType {
  # List of all todo items
  allTodos: [Todo]

  # A single todo item
  todo(id: String): Todo
}

# A single todo item
type Todo {
  id: String
  description: String
  complete: Boolean
}

This is the response I'm getting while console.log(props) on index.js:

Please help me to understand what I'm missing here. Thanks in advance.