React/React-spring: how to get an element/component out of the html flow?

Question

I'm new to web dev (and very new to React) and I was wondering how you could get an element or component out of flow using react-spring.

Example code:

import React from "react";
import Hello from "./Hello"
import World from "./World"

function App() {
    return <div><Hello /><World /></div>
}

export default App;

import React from "react";
import {useSpring, animated} from "react-spring";

function Hello() {

    const props = useSpring({
        opacity: 0,
        delay: 500,
        from: {opacity: 1}
    })

    return <animated.h1 style={props}>Hello</animated.h1>
}

export default Hello;

import React from "react";
import {useSpring, animated} from "react-spring";

function World() {

    const props = useSpring({
        opacity: 1,
        delay: 1000,
        from: {opacity: 0}
    })

    return <animated.h1 style={props}>World</animated.h1>
}

export default World;

Basically, what I'm trying to achieve here is have Hello disappear and then have World appear in the same spot. But because opacity does nothing but makes the element transparent, World appears in the next line. So, I was wondering if there was any way to make the element go in and out of flow using simple code.

End goal - Hello world

1. Have Hello disappear and then go out of flow

2. Have World introduced into the flow and reappear