How To Create Select Dropdown in React JS With Fetched Data From API

form.js

import React, {useState,useEffect} from 'react'

function Form() {
    const [companyName, setCompanyName] = useState("")
    const [companyOwner, setCompanyOwner] = useState("")
    const [ownerAddress, setOwnerAddress] = useState("")
    const [companyList, setCompanyList] = useState([{'name':'','id':''}])

    useEffect(() =>{
        const fetchData = async ()=>{
            const response = await fetch(`http://127.0.0.1:8000/api/company/`);
            const newData = await response.json();
            setCompanyList(newData);
            // console.log(newData);
        };
        fetchData();
    }, [])

    const handleChange = (event) =>{
        setCompanyName(event.target.value);
    }


    const saveBtn = (e) => {
        e.preventDefault();
        console.log('Company Owner',companyOwner);
        console.log('Company Owner Address',ownerAddress);
        console.log('Company Name',companyName);

    }

    return (
        <div>
            <div className="container-fluid">
                <div className="row">
                    <div className="col-sm-4">

           <h2 className="alert alert-warning">Company Owners Details</h2>
           <div className="col-sm-12">
            <label htmlFor="email_address">Company Owner Full Names</label>
            <div className="form-line">
              <input
                type="text"
                id="salt_qty"
                name="salt_qty"
                className="form-control"
                placeholder="Enter Owner Full Names"
                value={companyOwner}
                onChange={e=> setCompanyOwner(e.target.value)}
              />
            </div>
          </div>
          <br />


          <div className="col-sm-12">
            <label htmlFor="email_address">Company Owner Address</label>
            <div className="form-line">
              <input
                type="text"
                id="salt_qty"
                name="salt_qty"
                className="form-control"
                placeholder="Enter Owner Address"
                value={ownerAddress}
                onChange={e=> setOwnerAddress(e.target.value)}
              />
            </div>
          </div>
          <br />

          <select className="form-control" value={companyName} onChange={handleChange}>
              <option value="">Choose Company Name</option>

        {companyList.map(company => (
              <option value={company.name} key={company.id} >{company.name}</option>
    
              ))
              }

          </select>

          <br/>
          <button className="btn btn-primary" onClick={saveBtn}>Save</button>


          



                    </div>
                </div>
            </div>
            
        </div>
    )
}

export default Form

models.py

from django.db import models



class Company(models.Model):
    name=models.CharField(max_length=255)
    license_no=models.CharField(max_length=255)
    address=models.CharField(max_length=255)
    contact_no=models.CharField(max_length=255)
    email=models.CharField(max_length=255)
    description=models.CharField(max_length=255)
    added_on=models.DateTimeField(auto_now_add=True)

serializers.py

from rest_framework import serializers
from .models import Company
from django.contrib.auth.models import User
from rest_framework.authtoken.views import Token



class CompanySerilizer(serializers.ModelSerializer):
    class Meta:
        model=Company
        fields="__all__"