so I'm using Material Ui Fullscreen Dialog and everytime a state change, it will re-render and close the dialog box. what should i do? how can i collect data from this dialog box ? I'm using Context API to update parent state.

  const [advancedSearch, setAdvancedSearch] = useState({
    selectIdentify: "",
    type: "",
    gender: "",
    age: { from: "", to: "" },
    registerDate: { from: "", to: "" },
    and etc... (there are so many input field)
  });

  <Dialog
          fullScreen
          open={open}
          onClose={handleClose}
          TransitionComponent={Transition}
        >
          <AppBar>
            <Toolbar>
              <IconButton
                edge="start"
                onClick={handleClose}
              >
                <CloseIcon />
              </IconButton>
              <Typography
                component="div"
              >
                Advanced Search
              </Typography>
              <Button
                startIcon={<SearchIcon />}
              >
                Create New Form
              </Button>
              <Button
                startIcon={<SearchIcon />}
                onClick={handleClose}
              >
                Search
              </Button>
            </Toolbar>
          </AppBar>
          <div>
            <AdvancedSearchContext.Provider
              value={{ advancedSearch, setAdvancedSearch }}
            >
              <Form1 />
              <Form2 />
              <Form3 /> 
            </AdvancedSearchContext.Provider>
          </div>
        </Dialog>

i know one solution is to have state in the three Form1,2,3 Children but in that case how should I collect it in the parent and send the data ?