onChange Event not Triggered in React JS

export default function ActionRolesPage(props) {
      const [authorities, setAuthorities] = useState([]);
      const [name, setName] = useState("");
      let list = [];
      useEffect(() => {
        getAuthorities();
      }, []);
      const getAuthorities = () => {
        doGetAllAuthorities()
          .then((res) => {
            getValidatedData(res.data, "array").map((data) => (
              list.push({ authority: data})
            ))
            setAuthorities(list);
          }).catch((e) => {
            console.log(e);
          })
      }
      const handleChange = (e) => {
        console.log(e);
        const { name, checked } = e.target
        console.log(name,checked);
        let tempUser = authorities.map((user) => (
          user.authority === name ? { ...user, isChecked: checked } : user
        ));
        setAuthorities(tempUser);
      }
    
      if(authorities.length){
        console.log(authorities);
      }
    
      
      return (
        <React.Fragment>
          <Suspense fallback={<div>Loading....</div>}>
            <div className="page-content">
              <MetaTags>
                <title>Add Role | IG One</title>
              </MetaTags>
              <Container fluid>
                <Breadcrumb
                  title="Add Role"
                  breadcrumbItems={[{ title: "Settings" }, { title: "Roles" }, { title: "Add" }]}
                />
                <Form onSubmit={handleSubmit}>
                  <Card>
                    <CardBody>
                      <Row className="mb-3">
                        <label
                          htmlFor="example-text-input"
                          className="col-md-2 col-form-label"
                        >
                          Name
                        </label>
                        <div className="col-md-8 mx-0">
                          <Input
                            className="form-control"
                            type="text"
                            name="name"
                            required
                            value={name}
                            onChange={(e) => setName(e.target.value)}
                            placeholder="Name Of User "
                          />
                        </div>
                      </Row>
                      <br></br>
                      <br></br>
                      <Row className="mb-3">
                        <CardTitle>
                          Authorities
                        </CardTitle>
                        <div className="col-md-2">
    
                          {
                           
                              authorities.map((data,index) => (
                                <>
                                  <div key={index} style=>
                                    <div className='col-md-10 mx-0 mt-2'>
                                      <Input type={"checkbox"}
                                        checked={data?.isChecked || false}
                                        name={data.authority}
                                        onChange={(e) => console.log(e)}
                                        className="form-control"
                                        style=
                                      /></div>
                                    <div>
                                      <label style= htmlFor={data.authority} className="col-md-50 col-form-label"> {data.authority}</label>
                                    </div>
                                  </div>
                                </>
                              )) 
                          }
                        </div>
                      </Row>
                      <Row className="d-flex justify-content-center mt-4">
                        <Button color="dark" type='submit' className="btn-xs" style=
                        >
                          Add Role
                        </Button>
                      </Row>
                    </CardBody>
                  </Card>
                </Form>
              </Container>
            </div>
          </Suspense>
        </React.Fragment>
      )
    } 

Here is the whole code. I want to handle multiple checkboxes but onChange Event not triggered. There is a function handleChange it calls when onChange triggered but in my case there is no error seen in console as well as not display any event at console please resolve my doubt.

I also need to update the form getting respose from backend is checked authority name array How to handle checked state in checkbox.