Rails 6 Active Storage using Reactjs (functional component)

Question

I am having the issue with post request for upload photos with rails active storage with react js. Rails log shows unpermitted parameter :photos

All Active Storage setups are in place like

1. storage.yml

   local: service: Disk root: <%= Rails.root.join("storage")

2. environment development:

   config.active_storage.service = :local

3. Jobinfo controller:

    def create
       @jobinfo = Jobinfo.create(params_jobinfo)
       render json: @jobinfo, status: 201 if @jobinfo.save!
    end
   
   
     def params_jobinfo
       params.require(:jobinfo).permit(:client_name, 
                                       :division_name, 
                                       :block, 
                                       :address, 
                                       :natureofcomplain, 
                                       :dateEntry, 
                                       :gtotal,
                                       :defect_details_attributes => 
                                               [:id, 
                                                :jobinfo_id, 
                                                :defects, 
                                                :recommendation, 
                                                photos:[]],
                                       partsreplaces_attributes: [:id, :jobinfo_id, :sorcode, :quantity, :item, :rates, :subtotal,:_destroy]
       )
   end
   

4. DefectDetail < Application Record

   belongs_to :jobinfo
   has_many_attached :photos
   

5. Reactjs services API function:

         const createJobinfo = (
            division_name,
            client_name,
            dateEntry,
            complain_desc,
            address,
            block,
            total,
            defectinfo,
            partsinfo
         ) => {
   
      const jobinfo = {
           division_name: division_name,
           client_name: client_name,
           dateEntry: Moment(dateEntry).format("DD-MM-YYYY"),
           natureofcomplain: complain_desc,
           address: address,
           block: block,
           gtotal: total,
           defect_details_attributes: defectinfo.map((defect_info) => {
           console.log(defect_info.photos) // result is FileList {0: File, length: 1}
          return {
               defects: defect_info.defects,
               recommendation: defect_info.recommendation,
               photos:   defect_info.photos   // value of this is empty 
           }
       }),
   
         partsreplaces_attributes: partsinfo.map((item) => {
          return {
          sorcode: item.sorCode,
          item: item.item,
          quantity: item.quantity,
          rates: item.rates,
          subtotal: item.subtotal,
       };
      }),
    };
   
     axios
          .post(API_URL_JOBINFO,
          { jobinfo },
          { headers: header
       })
      .then((response) => {
      console.log(response.data);
      return response.data;
    });
   };
   

when I console.log(defect_info.photos) the result is

          FileList {0: File, length: 1}

when I console.log(defect_info.photos[0]) first array is

              File {name: 'dondon.png', lastModified: 1646625960330, lastModifiedDate: Mon Mar 07 2022 12:06:00 GMT+0800 (Philippine Standard Time), webkitRelativePath: '', size: 36662, …}

What I missed in this setup? hope someone will help me its almost weeks I cannot find solutions.