Unable to use logout function in django with react app

I want to logout user from django.auth from react component and I don't know how should i integrate my urls with react app. And i have no problem with login its working correctly. when i login from my login form it also logged in my django/admin, but when i logout from my website it does not log out from my admin panel.

Api app urls.py

from django.urls import path
from backend.api.views import *
app_name = 'backend'
urlpatterns = [
    path('booklist/', api_user_details, name='userdetails'),
    path('login/', login_auth , name='login'),
    path('signin/', Signin , name='Signin'),
    path('usercheck/', checkusername , name='usernamecheck'),
    path('update/', update , name='update'),
    path('logout/', logout_view , name='logout')
]

Api Views.py

from django.contrib.auth import logout

def logout_view(request):
    logout(request)
    return redirect('login')

React app component

import React,{useContext} from 'react';
import './profile_name_block.css';
import profileimg from '../../../person.png';
import { UserContext } from '../../../contexts/UserContext';
// import login from '../../../icons/login.png'
import logout from '../../../icons/login.png'
import profile from '../../../icons/profile.png'
import bookico from '../../../icons/books.png'
import request from '../../../icons/request.png'
const Profiled = () => {
    // eslint-disable-next-line
    const [user,setUser]=useContext(UserContext);
    const Logout = () => {
                    setUser({ logged: false, User_details: {} })
                    localStorage.clear();
                    window.location.href='/api/logout';
 }
    const expand = () => {
        var x = document.getElementById('profile_log');
        console.log(x.style.display)
        if (x.style.display === 'none' || x.style.display === '') {
          x.style.display = 'flex';
        } else {
          x.style.display = 'none';
        }
    }
    if(user.logged===true)
    {
    return(
    <React.Fragment>
        
        <div id="profile_name" onClick={expand}>
        <div id='user_name'>{ user.User_info.userdetails.full_name.toUpperCase() }</div>
            <div id="profile_img">
                <img src={ user.User_info.userdetails.profile_img==null? profileimg:user.User_info.userdetails.profile_img } height="40px" width='40px' id='profileimage' alt='profile' />
            </div>
        </div>
        <div id='profile_log'>
            <span onClick={() => window.location.href="/accountdetails" }>Profile <img id='ico' src={profile}></img></span>
            <span>Requests<img id='ico' src={request}></img></span>
            <span>Your Books<img id='ico' src={bookico}></img></span>
            <span onClick={ Logout }>Logout<img id='ico' src={logout}></img></span>
        </div>
    </React.Fragment>)
    }
    else{
        return null;
    }
}
export default Profiled;

And this is my project urls.py

from django.contrib import admin
from django.urls import path,include,re_path
from .views import *
from django.conf.urls.static import static
from django.conf.urls import url
from django.conf import settings
urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('backend.api.urls', 'api')),
]
if settings.DEBUG:
    urlpatterns+=static(settings.STATIC_URL , document_root=settings.STATIC_ROOT)
    urlpatterns+= static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
urlpatterns+= [re_path('.*', index , name='index')]

If any one can help that would be great.