Django - Я хочу заполнить форму данными из api get запроса, затем данные будут просмотрены и отправлены.

Моя цель состоит в том, чтобы пользователь ввел номер штрих-кода, который используется для получения API JSON из: https://world.openfoodfacts.org/api/v0/product/${barcode}.json

где я буду отображать данные, примерно так:

 const OffData = [barcodeData].map((result) => (
            {
            brand: result.brands,
            name: result.product_name,
            allergens: result.allergens,
            barcode: result._id,
            category: result.categories,
            weight: result.product_quantity,
        })

чтобы затем заполнить мою форму продукта: (установить значение каждого входа)

 <div class="flex justify-center space-x-7">
      <div class="card bg-base-200 shadow-2xl w-96 flex flex-row justify-center items-center pb-4 px-2">
        <div class="form-control w-full max-w-xs">
          <label class="label">
            <span class="card-title">Manual entry</span>
          </label>
            <form id="" action="" class="">
              <div class="flex flex-row items-center space-x-4">
                <input id="barcode_lookup" name="" type="number" placeholder="Enter EAN" class="input input-bordered w-full max-w-xs" />
                <i class="fa-solid fa-magnifying-glass fa-lg cursor-pointer" onclick="document.getElementById('barcode_lookup').submit()"></i>
              </div>
              <div class="flex flex-row items-center align-middle space-x-6 px-7 py-2">
                <div class="flex flex-col">
                <input type="text" placeholder="Brand" class="input input-ghost w-full max-w-xs" />
                <input type="text" placeholder="Name" class="input input-ghost w-full max-w-xs" />
                <input type="number" placeholder="Weight" class="input input-ghost w-full max-w-xs" />   
                </div>
                <div class="flex flex-col">
                  <input type="text" placeholder="Category" class="input input-ghost w-full max-w-xs" />
                  <input type="text" placeholder="Allergens" class="input input-ghost w-full max-w-xs" />
                  <label class="input input-ghost cursor-pointer w-full ">
                    <span class="input-ghost">Perishable?</span> 
                    <input type="checkbox" checked="checked" class="checkbox checkbox-xs" />
                  </label>  
                </div> 
            </form>
        </div>
      </div>
    </div>

скриншот формы продукта

которые я могу позже отправить в мою базу данных

Это моя Django-модель продукта:

class Product(models.Model):
    id = models.AutoField(primary_key=True)
    brand = models.CharField(max_length=100)
    name = models.CharField(max_length=100)
    barcode = models.CharField(max_length=100)
    category= models.CharField(max_length=500)
    perishable = models.BooleanField(default=False)
    allergens = models.CharField(max_length=500)
    weight = models.FloatField(default=0)

    def __str__(self):
        return "name:" + self.name + "barcode:" + self.barcode + "category:" + self.category + "perishable:" + str(self.perishable) + "weight:" + str(self.weight)  + "id:" + str(self.id) + "created_at:" + str(self.created_at) + "updated_at:" + str(self.updated_at)

любая помощь будет очень признательна.

fetch(`https://world.openfoodfacts.org/api/v0/product/${barcode}.json`)
  .then(response => response.json())
  .then(data => fillForm(data));