Toggle the check box on and off, and console log the id's of the selected checkboxes. How can i do that?

I am using material UI for UI, and Axios to fetch data as JSON from an API endpoint. I have been successful in sorting/ filtering/ mapping the users the way I want and displaying them on the table. There are 1000 users btw.

on clicking a LI, I would like the checkbox toggle to turn on and off. The ID's of the selected user has to console.log on the console. How can I write such a function? This should work with multiple LI's as well. I can select as many LI's as I want and they should all console.log

PS- as a bonus, I would also like to display the user email when I click a particular checkbox, inside the table. Toggle it on/ off Should I use Checkbox from the material-UI library, and use an onChange to show the {user.email} in a styledTableCell component?

so how about I write a state?

const [showEmail, setShowEmail]= useState(false);
const handleClick=()=>{
showMe= !this.state.showMe
}

on onChange i want to show {user.email} In a styledtablecell, so..

onChange={()=> onChange(setShowMail(????)}

but Where? on Checkbox? or inside styledtablecell. If inside styledtablecall how do I connect it with checkbox property?

this is where I' am confused

this is my render in App.js below-

import React, { Component, useState, useEffect } from "react";
        import axios from "axios";
        import { withStyles, makeStyles } from "@material-ui/core/styles";
        import Table from "@material-ui/core/Table";
        import TableBody from "@material-ui/core/TableBody";
        import TableCell from "@material-ui/core/TableCell";
        import TableContainer from "@material-ui/core/TableContainer";
        import TableHead from "@material-ui/core/TableHead";
        import TableRow from "@material-ui/core/TableRow";
        import Paper from "@material-ui/core/Paper";
        import Avatar from "@material-ui/core/Avatar";
        import Checkbox from "@material-ui/core/Checkbox";
        
        const StyledTableCell = withStyles((theme) => ({
          head: {
            backgroundColor: theme.palette.common.black,
            color: theme.palette.common.white,
          },
          body: {
            fontSize: 14,
          },
        }))(TableCell);
        
        const StyledTableRow = withStyles((theme) => ({
          root: {
            "&:nth-of-type(odd)": {
              backgroundColor: theme.palette.action.hover,
            },
          },
        }))(TableRow);
        
        const useStyles = makeStyles({
          table: {
            minWidth: 700,
          },
        });
        
        const App = () => {
          const classes = useStyles();
          const [users, setUsers] = useState([]);
          const [search, setSearch] = useState("");
          
        
          const getUserData = async () => {
            try {
              const data = await axios.get(
                //my json file structure. not attaching link due to privacy. 1000 users// users=[
    {
    "id":1,
    "first_name":"Suzie",
    "last_name":"something",
    "email":"jkshr.r@gmail.com",
    "gender":"Female",
    "Avatar":"https://..."
    
    },
]
    
              );
              console.log(data.data);
        
              setUsers(data.data);
            } catch (e) {
              console.log(e);
            }
          };
          useEffect(() => {
            getUserData();
          }, []);
        
        
            return (
                <div className="App">
                  <input
                    type="text"
                    placeholder="search here..."
                    onChange={(e) => {
                      setSearch(e.target.value);
                    }}
                  />
                  <TableContainer component={Paper} justify="center">
                    <Table className={classes.table} aria-label="customized table">
                      <TableHead>
                        <TableRow>
                          
                        </TableRow>
                      </TableHead>
                      <TableBody>
                        {users
                          .sort(function (a, b) {
                            if (a.last_name < b.last_name) {
                              return -1;
                            }
                            if (a.last_name > b.last_name) {
                              return 1;
                            }
                            return 0;
                          })
                          .filter((user) => {
                            if (search == "") {
                              return user;
                            } else if (
                              user.first_name
                                .toLowerCase()
                                .includes(search.toLowerCase()) ||
                              user.last_name.toLowerCase().includes(search.toLowerCase())
                            ) {
                              return user;
                            }
                          })
                          .map((user) => {
                            return (
                              <StyledTableRow key={user.id}>
                                <StyledTableCell component="th" scope="row" align="left">
                                  <Avatar>{user.avatar}</Avatar>
                                </StyledTableCell>
                                <StyledTableCell >
                                  {user.first_name} {user.last_name}
                                     
                                </StyledTableCell>
                                <Checkbox/>
                                
                              </StyledTableRow>
                            );
                          })}
                      </TableBody>
                    </Table>
                  </TableContainer>
                </div>
              );
        };
        export default App;

Thanks for all of your tips.