javascript - Cómo manejar múltiples casillas de verificación en typescript

Estoy tratando de manejar múltiples casillas de verificación de la siguiente manera:

sendFileNameToBackEnd = (filename: string[]) => {
    console.log(filename)
    this.vizsualizaForFileName(filename)
  }

render() {
  const handleChange = (checked: boolean, event: React.FormEvent<HTMLInputElement>) => {
      let listoffilename : Array<string> = []
      const target = event.currentTarget;
      const name = target.name;
      if(checked && name !== '')
        {
          listoffilename.push(name)
          this.setState({
            listoffilename1: listoffilename
          });
        }
        console.log(this.state.listoffilename1)
 };
 return (
 <DataList aria-label="Checkbox and action data list example" isCompact >
   { this.state.fileListData ?
     this.state.fileListData.map((fd) => 
     <DataListItem aria-labelledby="check-action-item1">
       <DataListItemRow>
         <DataListCheck 
           id="controlled-check"
           aria-labelledby="check-action-item" 
           isChecked={isChecked1}
           onChange={handleChange} 
           name={fd}/>
         <DataListItemCells
           dataListCells={[
            <DataListCell key="primary content">
              <span id="check-action-item1">{fd ? fd : "Loading..."}</span>
            </DataListCell>
           ]}
         />
       </DataListItemRow>
     </DataListItem>
     ): 
     <>
       <EmptyState>
        <Title headingLevel="h4" size="lg">Empty state</Title>
       </EmptyState>
     </>
  }
 </DataList>
<Button variant="primary" onClick={ () => {this.sendFileNameToBackEnd(this.state.listoffilename1)}}>Visualize</Button>
 );
}

En el código anterior, cuando selecciono cualquier casilla de verificación, puedo obtener su valor, pero cuando elijo varias casillas de verificación, solo obtengo un valor en un arreglo.

En 'this.state.fileListData' tengo n cantidad de datos y estoy mostrando una casilla de verificación usando un map y un botón llamado 'Visualize'. Cuando seleccionamos algunos de los valores de la casilla de verificación y hacemos clic en el botón 'Visualize', quiero enviar todos los valores seleccionados al backend para otra operación.

Cuando selecciono varias casillas de verificación, solo envía un valor en ellas, no todos los valores seleccionados.

Guíame si estoy haciendo algo mal.