I build parent and child component name RightFrame, I want to display different component. so I using state to update child component and pass it as props. but I want the child component self can update the state (now props) too. but I know that the rule have to declare props as const so It can't update.

the parent component look like:

const [page, setpage] = useState();

return(
<button onClick={() => setpage("main")} 
...
<RightFrame page={page}/>
);

and RightFrame that have 3 sub-component and I want that to update page by them self to change page (since EditClass and CreateClass is the component that have action that can be cancel, so after cancel by button and go back to render Class by <button onClick={page = "main"})

export default function RightFrame(props) {
  const { page } = props;

  return (
  <>
    {page == "main" && <Class/>}
    {page == "edit" && <EditClass/>}
    {page == "new" && <CreateClass/>}
  </>
)

and that's the problem that I want to solve, so I don't know that it is possible to declare props as var on not.