i am trying to send multiple files into my api in reactjs project, but the issue is that i do not see my files in the request when i see my network tab.

here is query for api

export const ADD_CLAIM = gql`
  mutation addClaim(
    $details: String!
    $file: [Upload]
  ) {
    addClaim(
      input: {
        journeyId: $journeyId
        details: $details
        file: $file
        insuranceRiskAnalysis: $insuranceRiskAnalysis
      }
    )
  }
`;

Frontend code

upon consoling the filesl like

console.log(files)

, from <input type="file" multiple/>, I see

File { name: "Testing sprint 13 - IOB.docx", lastModified: 1642575799836, size: 3031710, … }


//then hitting the api like
  iobClaim({
            variables: {
              journeyId:"xyz",
              details: values.details,
              file: files,
              insuranceRiskAnalysis: true
            },
          });


const [iobClaim, { loading }] = useMutation(ADD_CLAIM, {
    onError: (err: any) => {
      apiErrorHandler(err);

    },
    onCompleted: (data: any) => {
   
    },
  });

but then network tab shows empty file as you can see in the ss below