Estoy tratando de mover un elemento DOM en un componente a un componente separado. Básicamente, el div necesita subir dos niveles principales.

Tengo dos componentes en juego:

1. AuthFlow.js
2. SignUp.js

 //AuthFlow.js {renderForm()} {formType === 'signUp' && ( // This div needs to move up <div className="mt-6"> <p className="font-body text-white"> Already have an account?{' '} <span className="text-quad cursor-pointer" onClick={() => updateFormType('signIn')} > Sign In </span> </p> </div> )}

 // SignUp.js ... </div> <button className="transition-all transform hover:translate-y-1 rounded-md bg-tertiary py-3 mt-6 cursor-pointer border-2 border-transparent focus:outline-none focus:ring-2 focus:ring-tertiary focus:border-transparent" onClick={signIn} title="Sign In" > Sign in </button> // Eventual placement of the Div I want to move </form>

He buscado en los portales de React, pero no estoy seguro de si ese es el camino a seguir.