how to use logout button without authProvider - reactjs

Question

hi react admin community,
I want to use logout button with custom component and router. I have checked documentation but not found any solution.
please suggest to me how I can use it.
below I added my code.
Adminroot Component
This is Admin Component.
import React from 'react';
import { Admin, Resource } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';
import { UserList } from "../users/users";
import Dashboard from './dashboard';
import MyLogoutButton from '../auth/logout';
const authProvider = {
logout: params => Promise.resolve(),
};
function Adminroot(props) {
const dataProvider = jsonServerProvider('http://jsonplaceholder.typicode.com');
return (
<div>
<Admin logoutButton={MyLogoutButton} loginPage={false} dashboard={Dashboard} dataProvider={dataProvider}>
<Resource name="users" list={UserList} />
</Admin>
</div>
);
}
export default Adminroot;
MyLogoutButton Component
This component contains default code which provides react-admin for logout.
Now, when clicks on Logout button. by default redirects to /login Url.
There renders a Logout component (below written the logout component code) that contains logout logic and redirect to /signin but it shows blank page until I refresh the page.
import React, { forwardRef } from 'react';
import { useLogout } from 'react-admin';
import MenuItem from '#material-ui/core/MenuItem';
import ExitIcon from '#material-ui/icons/PowerSettingsNew';
const MyLogoutButton = forwardRef((props, ref) => {
const logout = useLogout();
const handleClick = () => logout();
return (
<MenuItem
onClick={handleClick}
ref={ref}
>
<ExitIcon /> Logout
</MenuItem>
);
});
export default MyLogoutButton;
Logout Component
import React , { useContext } from 'react';
import { AppContext } from '../../AppContext';
import { Redirect } from 'react-router-dom';
function Logout(props){
const {handleSignOut} = useContext(AppContext);
handleSignOut();
return props.history.push('/signin');
}
export default Logout;