Перевести название вкладки React-admin

Я использую React-admin и слежу за демонстрацией, которую они раздают. Пока все работает, кроме перевода названия / заголовка вкладки. Я сделал перевод правильно, потому что другие компоненты, у которых есть атрибут метка, отлично работают с переводом.

Переводы берутся из файла en.js и добавляются в app.js согласно документации реагировать-админ.

Вот мой код:

class TabbedDatagrid extends React.Component {
  tabs = [
      { id: 'countries', name: 'root.countries.title' },
      { id: 'languages', name: 'root.languages.title' },
  ];
  state = {  countries: [], languages: [] };

  static getDerivedStateFromProps(props, state) {
      if (props.ids !== state[props.filterValues.status]) {
          return { ...state, [props.filterValues.status]: props.ids };
      }
      return null;

  }

  handleChangeEvent = (event, value) => {
      const { filterValues, setFilters } = this.props;
      setFilters({ ...filterValues, status: value });
  };

  render() {
      const { classes, filterValues, ...props } = this.props;
      return (
          <Fragment>
              <Tabs
                  fullWidth
                  centered
                  value = {filterValues.status}
                  indicatorColor = "primary"
                  onChange = {this.handleChangeEvent}

              >
                  {this.tabs.map(choice => (
                      <Tab
                          key = {choice.id}
                          label = {choice.name}
                          value = {choice.id}
                      />

                  ))}
              </Tabs>
              <Divider />
              <Responsive
                  small = {<SimpleList primaryText = {record => record.title} />}
                  medium = {
                      <div>                           
                          {filterValues.status === 'countries' && (
                                <Datagrid hover = {false}
                                   {...props}
                                   ids = {this.state['countries']}
                                   >
                                    <TextField source = "id" />
                                    <TextField source = "name"  label = "root.countries.fields.name"/>
                                </Datagrid>
                                )}
                            {filterValues.status === 'languages' && (

                           <Datagrid hover = {false}

                              {...props}

                              ids = {this.state['languages']}

                              >

                               <TextField source = "id" />

                              <TextField source = "name"  label = "root.languages.fields.name"/>

                           </Datagrid>
                       )}
                      </div>

                  }

              />

          </Fragment>

      );

  }

}

Кажется, что перевод работает везде, кроме метки Tab. Вместо заголовка я получаю строку в верхнем регистре этого root.countries.title.

Есть ли обходной путь или как решить эту проблему?