Api Platform Admin working with guessers components but not with React-admin classic components

I'm currently facing an issue regarding Api Platform Admin. The Admin is working perfectly and displaying my user list when I use the guesser components used in Api Platform documentation such as "ListGuesser" or "ResourceGuesser". But as soon as I try to use classic React-admin components such as "List" or "Resource", the admin doesn't seems to call the api anymore and I get a blank page inheriting from my template but only displaying "resources.users.empty", "resources.users.invite", "ra.action.create".

If I use react-admin components such as "SelectInput" instead of guessers in my create form, the form is working but I get the same output format for my fields like "resources.users.fields.roles".

I'm working with the Api Platform distribution running on Docker provided by the documentation.

App.js:

import React from "react";
import { Resource } from 'react-admin';
import { Redirect, Route } from "react-router-dom";
import { HydraAdmin, hydraDataProvider as baseHydraDataProvider, fetchHydra as baseFetchHydra, ResourceGuesser } from "@api-platform/admin";
import parseHydraDocumentation from "@api-platform/api-doc-parser/lib/hydra/parseHydraDocumentation";
import authProvider from "./providers/authProvider";
import CustomComponent from "./components/CustomComponent";
import PostIcon from '@material-ui/icons/Book';
import customRoutes from './routing/customRoutes';
import {i18nProvider} from './providers/i18nProvider';
import CustomLayout from "./layouts/CustomLayout";
import {UserCreate, UserShow, UserList} from "./pages/users";


const entrypoint = process.env.REACT_APP_API_ENTRYPOINT;

const fetchHeaders = () => ({
  Authorization: `Bearer ${localStorage.getItem("token")}`,
});
const fetchHydra = (url, options = {}) =>
  localStorage.getItem("token")
    ? baseFetchHydra(url, {
      ...options,
      headers: new Headers(fetchHeaders()),
    })
    : baseFetchHydra(url, options);

const apiDocumentationParser = entrypoint => parseHydraDocumentation(entrypoint, { headers: new Headers(fetchHeaders) })
  .then(
    ({ api }) => ({ api }),
    (result) => {
      switch (result.status) {
        case 401:
          localStorage.removeItem("token");
          return Promise.resolve({
            api: result.api,
            customRoutes: [
              <Route path="/" render={() => {
                return window.localStorage.getItem("token") ? window.location.reload() : <Redirect to="/login" />
              }} />
            ],
          });

        default:
          return Promise.reject(result);
      }
    },
  );
const dataProvider = baseHydraDataProvider(
  entrypoint,
  fetchHydra,
  apiDocumentationParser
);

export default () => (
  <HydraAdmin
    dataProvider={ dataProvider }
    authProvider={ authProvider }
    entrypoint={ entrypoint }
    layout={ CustomLayout }
    i18nProvider={ i18nProvider }
    customRoutes={ customRoutes }
  >
    <ResourceGuesser name="greetings" />
    
    <Resource
      name="users"
      list={UserList}
      show={UserShow}
      create={UserCreate}
    />
    <Resource name={CustomComponent} icon={PostIcon} />
    
  </HydraAdmin>
);

My users.js :

import * as React from "react";
import { List, Datagrid, TextField, EmailField, ReferenceField, EditButton, Edit, SimpleForm, TextInput, ReferenceInput, SelectInput, Create, Filter, SimpleList } from 'react-admin';
import {
  HydraAdmin,
  ResourceGuesser,
  ListGuesser,
  CreateGuesser,
  FieldGuesser, ShowGuesser, InputGuesser
} from "@api-platform/admin";
import { useMediaQuery } from '@material-ui/core';

const userRowBackgroundColor = (record, index) => {

  if (record.email != null && record.password != null) {
    const backgroundColor = {
      backgroundColor: 'white'
    }
    return backgroundColor;

  } else {
    const backgroundColor = {
      backgroundColor: '#F5BB34'
    }
    return backgroundColor;
  }

}

const postRowStyle = (record, index) => ({
  backgroundColor: record.username.length >= 10 ? '#efe' : 'red',
});

export const UserList = props => {
  const isSmall = useMediaQuery(theme => theme.breakpoints.down('sm'));
  return (
    <div>
      <List {...props}>
        {isSmall ? (
          <SimpleList
            primaryText={record => record.username}
            secondaryText={record => `mail : ${record.email}`}
          />
        ) : (
          <Datagrid rowClick="edit" >
            <TextField source="id" />
            <EmailField source="email" />
            <TextField source="roles" />
          </Datagrid>
        )}
      </List>
    </div>
  )
};

export const UserShow = (props) => (
  <ShowGuesser {...props}>
    <FieldGuesser source="email" addLabel={true} />
  </ShowGuesser>
);

export const UserCreate = (props) => (
  <CreateGuesser {...props}>
    <InputGuesser source="email" />

    <SelectInput source="roles" choices={[
      { id: ['ROLE_ADMIN'], name: 'Administrateur' },
      { id: ['ROLE_USER'], name: 'Utilisateur' }
    ]} />

    <TextInput type="password" source="plainPassword" />

  </CreateGuesser>
);

Any help would be welcome, thanks