How to reset Material UI Checkbox on Dialog close - reactjs

Question

I've created a Dialog component via Material UI, dynamically imported from another file.
It works fine, except the checkboxes (also created with Material UI) inside this Dialog do not reset after each time Dialog closes. They only reset on page refresh. Other types of input, such as text or password do reset themselves automatically.
Please notice that the Dialog component does not have keepMounted = true, and that's how it resets its inputs automatically. Because, this value is false by default.
Here is the code for the original Dialog modal component:
import React, {useState, useEffect} from "react";
import Button from "#material/react-button";
import Divider from "#material-ui/core/Divider";
import Dialog from "#material-ui/core/Dialog";
import DialogActions from "#material-ui/core/DialogActions";
import DialogContent from "#material-ui/core/DialogContent";
import DialogContentText from "#material-ui/core/DialogContentText";
import DialogTitle from "#material-ui/core/DialogTitle";
import TextField from "#material-ui/core/TextField";
import FormGroup from "#material-ui/core/FormGroup";
import FormControlLabel from "#material-ui/core/FormControlLabel";
import Checkbox from "#material-ui/core/Checkbox";
const SearchModal = (props) => {
const [checkState, setCheckState] = useState({
checkedQuestions: true,
checkedAnswers: true,
checkedVerified: true,
checkedPending: true,
checkedDisputed: false
});
useEffect(() => {
if(
checkState.checkedQuestions === false &&
checkState.checkedAnswers === false
){
setCheckState({
...checkState,
checkedQuestions: true,
checkedAnswers: true
});
}
if(
checkState.checkedVerified === false &&
checkState.checkedPending === false &&
checkState.checkedDisputed === false
){
setCheckState({
...checkState,
checkedVerified: true,
checkedPending: true,
checkedDisputed: false
});
}
});
const checkSet = (event) => {
setCheckState({
...checkState,
[event.target.name]: event.target.checked
});
}
return(
<Dialog
open={props.searchOpen}
onClose={props.handleClose}
aria-labelledby="searchModalTitle"
aria-describedby="searchModalDescription"
id="searchModal"
>
<DialogTitle id="dialog">{"Search tolodire."}</DialogTitle>
<DialogContent>
<DialogContentText className="marginBottom-17" id="searchModalDescription">
Search for questions or answers.
</DialogContentText>
<TextField
required
type="search"
id="searchQuery"
label="Enter keywords or sentences"
placeholder="Required"
variant="outlined"
data-owner="searchModal"
autoFocus
/>
<DialogContentText className="marginTop-20 marginBottom-10">
Use filters to search in detail.
</DialogContentText>
<FormGroup row className="marginTop-5">
<FormControlLabel
control={
<Checkbox
color="default"
checked={checkState.checkedQuestions}
onChange={(e) => checkSet(e)}
name="checkedQuestions"
/>
}
label="Questions"
/>
<FormControlLabel
control={
<Checkbox
color="default"
checked={checkState.checkedAnswers}
onChange={(e) => checkSet(e)}
name="checkedAnswers"
/>
}
label="Answers"
/>
</FormGroup>
<Divider/>
<FormGroup row>
<FormControlLabel
control={
<Checkbox
color="default"
checked={checkState.checkedVerified}
onChange={(e) => checkSet(e)}
name="checkedVerified"
/>
}
label="Verified"
/>
<FormControlLabel
control={
<Checkbox
color="default"
checked={checkState.checkedPending}
onChange={(e) => checkSet(e)}
name="checkedPending"
/>
}
label="Pending Verification"
/>
<FormControlLabel
control={
<Checkbox
color="default"
checked={checkState.checkedDisputed}
onChange={(e) => checkSet(e)}
name="checkedDisputed"
/>
}
label="Disputed"
/>
</FormGroup>
</DialogContent>
<DialogActions>
<Button raised className="button regularButton font-body" onClick={props.handleClose}>
Search
</Button>
</DialogActions>
</Dialog>
);
}
export default SearchModal
I've already tried searching this issue on Google and StackOverflow, yet, I haven't found any solution. Any contribution is appreciated.
P.S: The handleClose const is on another file;
const [searchOpen, setSearchOpen] = useState(false);
const handleSearchOpen = () => {
setSearchOpen(true);
};
const handleClose = () => {
setSearchOpen(false);
};

Answer 1

I've found the solution myself.
In the same file for SearchModal, I've created another useEffect field to check if the modal is open or not. When I was trying the same inside the pre-existing useEffect field, it created infinite loop.
For the reset process, I'm assigning the default values from scratch independently from other consts.
I am aware that the implementation could be much better, with more code-reuse or dynamic elements. But, this is just a primitive solution until a better one appears any time soon.
So, the solution is:
useEffect(() => {
if(props.searchOpen === false){
setCheckState({
checkedQuestions: true,
checkedAnswers: false,
checkedVerified: true,
checkedPending: true,
checkedDisputed: false
});
}
}, [props.searchOpen]);