Checkboxes not unchecking in React drop down menu?

I'm working on a dropdown menu in React.js which serves as a filter for some of the items of the page. The filter function works fine, but when I go to check one of the filters, the check shows up, and then when I click on it again, it does not disappear..

import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';

function Filter() {  
    const [anchorEl, setAnchorEl] = React.useState(null);

    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };

    const handleClose = () => {
        setAnchorEl(null);
    };

    const handleChange = (event) => {
        setState({ ...state, [event.target.name]: event.target.checked });
    };
    
    return(
    <div>
      <Button style= onClick={handleClick}>Filter</Button>
            <Menu id="simple-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
                <div>
                    <MenuItem>
                        <label for="one"><input type="checkbox" id="one" name="filter" onChange={handleChange} value="opt1" /> Option1</label>
                    </MenuItem>
                </div>
                <div>
                    <MenuItem>
                        <label for="two"><input type="checkbox" id="two" name="filter" onChange={handleChange} value="Photography" className="medium" /> Photography</label>
                    </MenuItem>
                </div>
            </Menu>
        </div>
    )
}

Basically, I want the checks in the checkboxes to not show when I check click on them after clicking on them once? How do I get them to show? I checked to ensure that I'm using the correct conventions for checkboxes with the name and the div that you are supposed to use between them, but I wondering why it still won't show. I'm using components of the Material-UI library: https://material-ui.com/components/menus/