React Admin - Edit and Show doesn't work in my List

Question

I'm trying to create the edit and view option in my list, but it doesn't work using edit.

Here is a screenshot of what the result looks like: My list - result

import * as React from "react";
import { Admin, Resource } from 'react-admin';
import buildGraphQLProvider from 'ra-data-graphql';
import buildQuery from './buildQuery';
import { ApolloClient, InMemoryCache } from '@apollo/client';
import MerchantList from './Dashboard'
import MerchantEdit from './EditMerchant'
import { PostList, PostCreate, PostShow } from './posts';


const client = new ApolloClient({
    uri: 'http://localhost:3002',
    cache: new InMemoryCache()
});

const App = () => {
    const [dataProvider, setDataProvider] = React.useState(null)
    React.useEffect(() => {
        buildGraphQLProvider({
            client,
            buildQuery
        })
            .then(graphQlDataProvider => setDataProvider(() => graphQlDataProvider))
    }, [])

    return (
        <Admin dataProvider={dataProvider}>
            <Resource name="listMerchant" list={MerchantList} create={PostCreate} edit={MerchantEdit} show={PostShow}/>
        </Admin>
    )
}

export default App;

// in the MerchantEdit.js

export default function MerchantEdit(props) {
    return (
        <Edit {...props}>
            <SimpleForm>
                <TextInput disabled label="Id" source="id" />
                <TextInput source="client_site_code" validate={required()} />
                <TextInput multiline source="merchant_name" validate={required()} />
                <DateInput label="Publication date" source="user_name" />
            </SimpleForm>
        </Edit>
    )
}