I am trying to move a DOM element in one component into a separate component. Basically, the div needs to move up two parent levels.

I have two components at play:

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>

I've looked into React portals, but I am not sure if that is the way to go.