React-admin: with custom username as id not displaying any form

Question

In react admin v3, I want to display an edit my profile form, it will contain

• Form to edit my firstName, lastName, email, mobile

• Form to edit my password

I want both form on the same page, with two submit button. I also want the saving to stay on that page.

This is what I have tried:

import React from 'react';
import { Edit, SimpleForm, TextInput } from 'ra-ui-materialui';
import { useHistory } from 'react-router';

export default (props) => {
  const history = useHistory();
  const { username } = JSON.parse((localStorage.getItem('jwt') || '{}'));
  if (!username || username !==  props.id) {
    history.push('/');
    return null;
  }
  return (
    <Edit
      basePath="/"
      resource="profile"
      {...props}
    >
      <SimpleForm redirect="edit">
        <TextInput source="firstName" />
      </SimpleForm>
    </Edit>
  );
};

For some reason, the form is performing the ajax request and the entity is retrieved but not injected in the <SimpleForm />, so it does not render anything:

What am I doing wrong?