Как загрузить изображение в бэкенд django с помощью react и fetch

Я пытаюсь сделать запрос PUT к бэкенду django для обновления изображения. Но всякий раз, когда я делаю запрос, он возвращает изображение, которое уже есть в базе данных. Оно не обновляется новым изображением, которое я загрузил.

views.py

@api_view(['PUT'])
def UserPageCreateView(request, pk):

    if request.method == "PUT":
        page = UserPage.objects.get(id=pk)
        serializer = UserPageSerializer(instance=page, data=request.data, many=False, partial="True")
            
    if serializer.is_valid():
                
        serializer.save()

    return Response(serializer.data)

models.py

class UserPage(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)
    slug = models.SlugField()
    title = models.CharField(max_length=100, default="")
    description = models.TextField(max_length=100, default="")
    profile_photo = models.ImageField(upload_to="images", default="media/images/apple_atgqt1")
    

    def save(self, *args, **kwargs):
        self.slug = self.user.username


        super().save(*args, **kwargs)

    def __str__(self):
        return self.user.username

    def get_absolute_url(self):
        return reverse("page_detail", kwargs={"slug": self.slug})

Реагировать на запрос FETCH REQUEST

const PageUpdate = async (e) => {

    const response =  await fetch(`http://127.0.0.1:8000/page-create/${id}`,{
      method: "PUT",
      credentials: "include",
     headers: {
      
       "Content-Type": "multipart/form-data"
      },
      
      
      body:JSON.stringify({
        
        "profile_photo": profile_photo,
       
    })
    })

    let data = await response.json()
    console.log(data)
  }

Модаль выбора нового изображения для загрузки

<Modal.Body>
          <Form>
            <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
              <Form.Label>Email address</Form.Label>
              <Form.Control
                type="file"
                value={profile_photo}
                onChange={(e) => setProfilePhoto(e.target.value)}
                
              />
            </Form.Group>
            <Form.Group
              className="mb-3"
              controlId="exampleForm.ControlTextarea1"
            >
              
            </Form.Group>
            <Button variant="secondary" onClick={handleClose}>
            Cancel
          </Button>
          </Form>
        </Modal.Body>

Браузер

[form and console image][1]

Из приведенного выше изображения видно, что загруженное мной изображение не является тем, которое отображается, когда я делаю console.log().

Пожалуйста, помогите мне. Спасибо.

profile_photo = models.ImageField(upload_to="images", null=True, blank=True)

<Form.Control
     type="file"
     value={profile_photo}
     onChange={(e) => setProfilePhoto(e.target.files[0])}
 />