trying to post form data to django rest API by react using axios error buy saying The submitted data was not a file. Check the encodon

I am trying to send the form data( image) using react and Axios to rest API to Django data base I leading an error {photo: ["The submitted data was not a file. Check the encoding type on the form."]}photo ["The submitted data was not a file. Check the encoding type on the form."] "The submitted data was not a file. Check the encoding type on the form."

import React, { useState } from "react";
import InputChar from "./SmallComponents/InputChar";
import InputNum from "./SmallComponents/InputNum";
import axios from "axios";
function CreateProduct() {
  const [productData, setProductData] = useState({
    name: "",
    producttype: "",
    color: "",
    brand: "",
    desc: "",
    gender: "",
    offer: 0,
    price: 0,
    size: "",
    photo: "",
  });

  function handleParentCharChange(featureName, featureValue) {
    setProductData((preProductData) => {
      return {
        ...preProductData,
        [featureName]: featureValue,
      };
    });
    console.log("------product data ----", featureName, featureValue);
    console.log("product data", productData);
  }

  function handleFormData(event) {
    setProductData((preProductData) => {
      return {
        ...preProductData,
        [event.target.name]: event.target.value,
      };
    });
    console.log("product data", productData);
  }
  function handleImageData(event) {
    const file = event.target.files[0]; // accessing file
        console.log("++++++++++image+++++++++++",file);
        setProductData((preProductData) => {
            return {
                ...preProductData,
                "photo" : file,
            }
        })
  }
  function submitHandler(event) {
    event.preventDefault();
    axios
      .post("http://127.0.0.1:8000/product/productcreate/", productData)
      .then((response) => {
        console.log("data is stored", response);
      })
      .catch((error) => {
        console.log("data is not store", error,productData);
      });
  }
//   bubling and capuing

  return (
    <div>
      <h1>Create product </h1>
      <form
        method="POST"
        encType="multipart/form-data"
        onSubmit={submitHandler}
      >
        <InputChar name="name" handleCharChange={handleParentCharChange} />
        <select
          name="producttype"
          value={productData.producttype}
          onChange={handleFormData}
        >
          <option>--chose--</option>
          <option value="fashion"> fashion </option>
          <option value="kids"> kids </option>
          <option value="menfashion"> menfashion </option>
          <option value="books"> books </option>
          <option value="mobile"> mobile </option>
          <option value="computer"> computer </option>
          <option value="laptop"> laptop </option>
          <option value="sports"> sports </option>
          <option value="health"> health </option>
          <option value="kitchen_items"> kitchen_items </option>
          <option value="groceis"> groceis </option>
          <option value="movies/songs"> movies/songs </option>
        </select>
        <br />

        <select
          name="gender"
          value={productData.gender}
          onChange={handleFormData}
        >
          <option>---chose--</option>
          <option value="male"> male </option>
          <option value="female"> female </option>
        </select>
        <InputChar name="color" handleCharChange={handleParentCharChange} />
        <InputChar name="brand" handleCharChange={handleParentCharChange} />
        <InputNum name="offer" handleCharChange={handleParentCharChange} />
        <InputNum name="price" handleCharChange={handleParentCharChange} />
        <select name="size" value={productData.size} onChange={handleFormData}>
          <option>---chose--</option>
          <option value="small"> small </option>
          <option value="mediam"> mediam </option>
          <option value="long"> long </option>
        </select>
        <InputChar name="desc" handleCharChange={handleParentCharChange} />
        
        <input
          name="photo"
          type="file"
        //   value={productData.photo}
          onChange={handleImageData}
        />
        <br />
        <input type="submit" />
      </form>
    </div>
  );
}

export default CreateProduct;