Django+React : CORS policy: Request header field access-control-allow-methods is not allowed by Access-Control-Allow-Headers in preflight response

Question

I am using Django for my backend and React for my Frontend. When I try to send a POST request, I receive :

Access to XMLHttpRequest at 'http://localhost:8000/package/' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field access-control-allow-methods is not allowed by Access-Control-Allow-Headers in preflight response.

I have combined a lot of answers that I found such as How to use csrf_token in Django RESTful API and React? and Django and React: csrf cookie is not being set in request header but still no luck.

1. 'corsheaders' is in my INSTALLED APPS
2. Middleware settings

MIDDLEWARE = [
    
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',

    'corsheaders.middleware.CorsMiddleware',
    
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',

    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

3. CORS settings:

CORS_ORIGIN_ALLOW_ALL = True

CORS_ALLOW_METHODS = [
    "DELETE",
    "GET",
    "OPTIONS",
    "PATCH",
    "POST",
    "PUT",
]

CORS_ORIGIN_WHITELIST = (
'http://localhost:3000',
)

CORS_ALLOWED_ORIGINS = [
    'http://localhost:3000',
]

CSRF_TRUSTED_ORIGINS = ['http://localhost:3000']

from corsheaders.defaults import default_headers
CORS_ALLOW_HEADERS = default_headers + ('cache-control',)

4. Django view.py

from django.shortcuts import render
from django.views.generic.edit import CreateView
from .forms import PackageForm

from django.utils.decorators import method_decorator
from django.views.decorators.csrf import ensure_csrf_cookie

class PackageFormView(CreateView):

    form_class = PackageForm
    initial = {'key': 'value'}
    template_name = 'package_form.html'

    def get(self, request, *args, **kwargs):
        form = self.form_class(initial=self.initial)
        return render(request, self.template_name, {'form': form})

    @method_decorator(ensure_csrf_cookie)
    def post(self, request, *args, **kwargs):

        form = self.form_class(request.POST)
        if form.is_valid():

            form.save()

        return render(request, self.template_name, {'form': form})

5. React call

var csrftoken = getCookie("csrftoken");

    function getCookie(name) {
      var cookieValue = null;
      if (document.cookie && document.cookie !== "") {
        var cookies = document.cookie.split(";");
        for (var i = 0; i < cookies.length; i++) {
          var cookie = jQuery.trim(cookies[i]);
          if (cookie.substring(0, name.length + 1) === name + "=") {
            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
            break;
          }
        }
      }
      return cookieValue;
    }

    const cors = {
      "X-CSRFToken": csrftoken,
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Credentials": "true",
      "Access-Control-Allow-Methods":
        "POST, GET, PUT, DELETE, OPTIONS, HEAD, authorization",
      "Access-Control-Allow-Headers": "*",
      "Content-type": "application/json",
      "withCredentials": "true",
    };

    axios
      .post(
        baseURL,
        {
          title: "title from react",
          description: "description from react",
          "withCredentials": "true",
        },
        {
          headers: cors,
        }
      )
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
  };

I have already spent about 10 hours on this, I still can't find how to fix it.