TypeError: байтовые индексы должны быть целыми числами или фрагментами, а не str & код состояния 500

Я создаю сайт электронной коммерции, используя ReactJS и Django (используя redux). Я пытаюсь отправить пост-запрос в мою БД, но получаю следующую ошибку:

firstName = data['firstName'], TypeError: байтовые индексы должны быть целыми числами или фрагментами, а не str [31/May/2022 16:56:55] "POST /api/create/ HTTP/1.1" 500 63122

Вот мой код:
View.js

@api_view(['POST'])
@csrf_exempt
def createCitizen(request):
    data = request.body
    citizens = Citizen.objects.create (
        firstName = data['firstName'],
        lastName = data['lastName'],
        dateOfBirth = data['dateOfBirth'],
        address = data['address'],
        City = data['City'],
        zipCode = data['zipCode'],
        cellular = data['cellular'],
        landLine = data['landLine'],
        hadCovid = data['hadCovid'],
        previousConditions = data['previousConditions']
    )
    serializer = CitizensSerializer(citizens, many=True)
    serializer.save()
    return JsonResponse(serializer.data, safe=False)

Соответствующая часть в RegisterPage.js

 const submitHandler = (e) => {
    e.preventDefault();

    dispatch(createCitizens({
      firstName,
      lastName,
      dateOfBirth,
      address,
      City,
      zipCode,
      cellular,
      landLine,
      hadCovid,
      previousConditions
    }))
  }

  return (
    <Form onSubmit={submitHandler}>
      <Row>
              <h4>Please enter your information:</h4>
            </Row><br></br><Row className="mb-3">
                <Form.Group as={Col} controlId="firstName">
                  <Form.Label>First Name</Form.Label>
                  <Form.Control
                    placeholder="Enter first name"
                    required
                    value={firstName}
                    onChange={(e) => setFirstName(e.target.value)} />
                </Form.Group>
...

citizenAction.js

export const createCitizens = (citizens) => async (dispatch) => {

    try {
        dispatch({type: 'CITIZEN_CREATE_REQUEST'})

        const {data} = await axios.post('/api/create/', citizens)

        dispatch({
            type: 'CITIZEN_CREATE_SUCCESS',
             payload: data
            })

    } catch (error) {
        dispatch({
            type: 'CITIZEN_CREATE_FAIL', 
            payload: error.response && error.response.data.message ? error.response.data.message : error.message,
    })
    }
}

Я заполнил строку формы, но получил эту ошибку, кто-нибудь знает в чем проблема? и почему я получил код ошибки 500? Спасибо!

Вернуться на верх