我有一个MetaTable组件，其中的LeftSidePanel Package 了UseContext。我想在单击MetaTable上的按钮时打开面板（传递一些数据以显示特定记录的详细信息）。我的代码可以打开面板，但当我单击外部时，它不会关闭。我想我需要将父面板上的状态设置回去。尝试了一些操作，但失败了。请提供指导？

元表组件

export const DrawerDataContext = createContext();
    export const DrawerContext = createContext();
    
    const [isDrawerOpen, setDrawerOpen] = useState();
    const [bookId, setBookId] = useState({});
    
    const toggleSidePanel = (row) => {
        setBookId(row)
        setDrawerOpen(true);
    
      }
    
    ... <TableCell className={classes.tableCell}>
                          <Stack spacing={0}>
                            <Typography variant="body2" my={0}>
                              {row}
                            </Typography>
                            <Typography variant="body2" my={0}>
                              {row}
                            </Typography>
                          </Stack>
                          <Stack spacing={2}>
                            <button onClick={() => { toggleSidePanel(row); }} >toggle drawer</button>
                          </Stack>
                        </TableCell>...
    
    
    <DrawerDataContext.Provider value={bookId}>
            <DrawerContext.Provider value={isDrawerOpen} >
              <LeftSidePanel />
            </DrawerContext.Provider>
          </DrawerDataContext.Provider>

左侧面板组件

const book= useContext(DrawerDataContext);
const open = useContext(DrawerContext);

return (
        <>

            <Drawer open={open} onClose={() => !open} anchor='left'>

                <List style={{ width: 500 }}>

                </List>
            </Drawer>
        </>
    );