React admin tree hierarchy and collapse buttons do not appear - reactjs

Question

I'm having a hard time trying to make ra-tree-ui-materialui work following this doc :
https://github.com/marmelab/react-admin/blob/master/packages/ra-tree-ui-materialui/README.md
I already have a react-admin backoffice with some fixture data, and I decided, after editing my App.js like explained in link above, to put my tree logic inside SegmentationList.js, which manages display of all Segmentations coming from an APIPlatform backend.
I commented datagrid logic already present in file, to test the tree alone. I kept all imports active and added those needed for the tree like in docs. With this code I manage to have the tree displayed, but with no hierarchy view at all, even when I set a row as child of another by editing, or when I do it via drag and drop.
When I try the latter, I actually view the child row nested inside its parent with collapse button for a few seconds only. Then it comes back to a flat tree.
I have tried to disable JSS in the file to see if style was guilty. I checked if react-dnd was installed and it is. I checked that parent field had value expected in child row by coming back to its edit page. Finally I went to backend side to check if parent field values in DB were consistent with what I saw in frontend, it was. Finally I had a look on this topic : https://github.com/marmelab/react-admin/issues/2980 since I also have the warning "Missing translation for key: "ra.tree.root_target"".
Thanks for your help.
First, here is my App.js file :
import React, {Component} from 'react';
import { Admin, Resource, mergeTranslations } from 'react-admin';
import { reducer as tree } from 'ra-tree-ui-materialui';
import englishMessage from 'ra-language-english';
import treeEnglishMessages from 'ra-tree-language-english';
import parseHydraDocumentation from '#api-platform/api-doc-parser/lib/hydra/parseHydraDocumentation';
import { hydraClient } from '#api-platform/admin';
import Locale from "./Resources/Locale/"
import Segmentation from "./Resources/Segmentation/"
import SegmentationTranslation from "./Resources/SegmentationTranslation/"
import Product from "./Resources/Product/"
import Attribute from "./Resources/Attribute/"
import ProductTranslation from "./Resources/ProductTranslation/"
import translations from './i18n';
import CustomRoute from './routes';
import themeReducer from './themeReducer';
import { Layout } from './layout';
import LocaleRetrieve from './Utils/LocaleRetrieve';
const messages = {
'en': mergeTranslations(englishMessage, treeEnglishMessages),
};
const dataProvider = api => hydraClient(api);
const httpEndpoint = process.env.REACT_APP_XXX_HTTP;
const apiDocumentationParser = httpEndpoint => parseHydraDocumentation(httpEndpoint)
.then(
({ api }) => ({api})
);
const i18nProvider = locale => {
// change of locale after initial call returns a promise
return translations[locale];
}
export default class extends Component {
state = { api: null };
componentDidMount() {
apiDocumentationParser(httpEndpoint).then(({ api }) => {
this.setState({ api });
}).catch((e) => {
console.log(e);
});
console.log(LocaleRetrieve());
};
render() {
if (null === this.state.api) return <div>Loading...</div>;
return (
<Admin api={ this.state.api }
apiDocumentationParser={ apiDocumentationParser }
dataProvider= { dataProvider(this.state.api) }
customReducers={{theme: themeReducer, tree}}
messages={translations}
locale="en"
i18nProvider={i18nProvider}
title="XXX"
customRoutes={CustomRoute}
appLayout={Layout}
>
<Resource name="locales" {...Locale} />
<Resource name="segmentations" {...Segmentation} />
<Resource name="segmentation_translations" {...SegmentationTranslation}/>
<Resource name="products" {...Product}/>
<Resource name="product_translations" {...ProductTranslation}/>
<Resource name="attributes" {...Attribute}/>
</Admin>
)
}
}
and here is my component with tree logic, located in src/Resources/Segmentation/SegmentationList.js :
import React, {Fragment} from 'react';
import {List, Datagrid, TextField, ChipField, BooleanField, ReferenceField, EditButton, ReferenceInput, AutocompleteInput, ShowButton, Filter, TextInput, Labeled, CardActions, ExportButton, RefreshButton, DeleteButton, SaveButton } from 'react-admin';
import LinkToTranslatations from './LinkToTranslations';
import AddChildButton from "./AddChildButton";
import ListChildButton from "./ListChildButton";
import PublishedButtons from './PublishedButtons';
import CreateSegmentationButtons from './CreateSegmentationButtons';
// for tree
import { withStyles } from '#material-ui/core/styles';
import { IgnoreFormProps, Tree, NodeForm, NodeActions, NodeView } from 'ra-tree-ui-materialui';
const styles = {
hash: {
marginLeft: '15px',
fontWeight: 'bold',
marginRight: '15px'
},
type: {
marginLeft: '15px',
marginRight: '15px',
textTransform: 'uppercase'
},
title: {
marginLeft: '15px',
marginRight: '15px'
}
};
// for tree
const SegmentationTreeActions = props => (
<NodeActions {...props}>
<LinkToTranslatations />
<ShowButton />
<IgnoreFormProps>
<EditButton />
<DeleteButton />
</IgnoreFormProps>
</NodeActions>
);
// tree
export const SegmentationList = withStyles(styles)(({ classes, ...props}) => (
<List {...props} perPage={10000}>
<Tree allowDropOnRoot enableDragAndDrop>
<NodeView actions={<SegmentationTreeActions />}>
<TextField source="hash" className={classes.hash} />
<TextField source="type" className={classes.type} />
<TextField source="title" className={classes.title} />
</NodeView>
</Tree>
</List>
));
export default SegmentationList;