This is an application in which I'm using django backend and react frontend. The images display in react when I keep react and django separate and communicate simply with the APIs. However, I want to deploy both the frontend and backend together. I'm trying to use django re_path to redirect any url that does't match with the urls specifiled in django urls.py. Whenever I do this the images from react and django stop displaying. Both django and react lose track of the path of the images.

project structure
>backend
    ...
    settings.py
    urls.py
>blog
    ...
    urls.py
    serializers.py
    views.py
>frontend
    ...
    build
    src
    package.json
manage.py
>static

urls.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('djoser.urls')),
    path('api/', include('djoser.urls.jwt')),
    path('api/', include('accounts.urls')),
    path('summernote/',include('django_summernote.urls')),
    path('api/blog/', include('blog.urls')),
    re_path('*', TemplateView.as_view(template_name='index.html')),
   
]

settings.py

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, 'frontend/build')
        ],
        'APP_DIRS': True,
    },
]

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static',),
    os.path.join(BASE_DIR, 'frontend/build/static'),
    ]
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')

How do I fix this? I'm using Django v4