Is this safe to set a component as a state value?

[ghost]

For now, this code works fine. But need your advice from a performance and code structure perspective.

const setPopup = useSetRecoilState(popupState);

const handleForgetPassword=()=>{
  setPopup(<ForgetPassword/>);
}

[drarmstr]

In general non-mutable objects should be used as state so state changes are properly captured. It might make sense to use a handle or ID to reference components.