'Warning: Cannot update a component (LoginPage) while rendering a different component (Dialog)."

[marcosgeorgopoulos]

Hi, I'm new to react but I am hitting an error in my code that I cannot make sense of with one of the PrimeReact Components

<Dialog visible={showRegister} onHide={() => setShowRegister(false)} position="top" header={ dialogRegisterHeader}  showHeader={true} breakpoints={{ '960px': '80vw' }} style={{ height: 'auto',width: 'auto' }}>
              Registration showregister = { handleRegisterState }  setHeader = { handleRegisterheader }/>
        </Dialog>

I am wrapping a 'Dialog' around my own custom component 'Registration' and that works fine.

I pass in two 'handlers' so that from within my 'Registration' component I can close/hide the dialog and I am also trying to update the Dialog 'header' text from the child 'Registration' component

const [setDialogRegisterHeader, dialogRegisterHeader] = useState('<div>'Register your account</div>;');
 
const [showRegister, setShowRegister] = useState(false);

  function handleRegisterState(newValue) {
    setShowRegister(newValue);
 }
 
 function handleRegisterheader(newValue) {
  setDialogRegisterHeader(newValue);
}

so I am using 'usestate' for the header and also for whether to show the dialog 'visible'

The code for showregister works fine... however the following code.

const [setDialogRegisterHeader, dialogRegisterHeader] = useState('<div>'Register your account</div>;');
causes the following warning and my code loops.

'Warning: Cannot update a component (LoginPage) while rendering a different component (Dialog)."

The LoginPage component is the component my code is in.

What is interesting is just the definition of the const

const [setDialogRegisterHeader, dialogRegisterHeader] = useState('<div>'Register your account</div>;');

triggers the warning, I don't even have to pass it as a prop into the Registration component.
Any ideas?