¿Cómo puedo añadir un sitio web de la pantalla de carga en ReactJS?

Soy realmente nuevo en ReactJs, JS y básicamente todo el desarrollo de la web. Estoy tratando de crear una página en la cartera de sitio web utilizando ReactJS y quería probar algunas de las técnicas más avanzadas, tales como el uso de ganchos. Quería crear un efecto simple, donde se reproduce una animación de una vez (primera vez que un usuario inicia sesión en mi sitio web), luego son llevados al sitio principal. Todos los recursos que he encontrado en línea se refieren a pantallas de carga mientras que la obtención de datos de una API. Aquí está mi código para la pantalla de carga:

import Typical from 'react-typical';
import "./Loading.scss";
import {useState, useEffect} from 'react';

const Loading = function Loading() {
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true)
    setTimeout(() => {
      setLoading(false)
    },18000);

  }, [])

        return (
      <div>
        <h1 id="loading">
          { loading ?  <Typical oop={1} wrapper = 'p'
          steps={[
              "Hello",
              2000,
              "My name is Leonard.",
              3000,
              "I am an aspiring developer",
              3000,
              "Welcome to my website!",
              3000,
            ]} /> : null}
        </h1>
      </div>
    );

}

Estoy usando un simple reaccionar paquete llamado típica que da a una bonita animación de las palabras que se escriben en la pantalla como una máquina de escribir, luego se elimina, entonces el siguiente fragmento de texto, se muestra etc.. esto sólo bucles una vez. He usado el useState y useEffect ganchos con un temporizador para setLoading a false en 18 años, que es cuando la animación se detiene. Como se puede ver que el render de la animación sólo si la carga es cierto, el uso de un operador ternario, a continuación, una vez que la carga se establece en false, entonces null se muestra. Mi app.js se parece a esto:

import Nav from './Components/Nav';
import "./App.scss";
import Loading from './Components/Loading';

function App() {
  return (
    <div>
      <Loading /> 
      <main>
      <Nav/>
      </main>

    </div>

    
  );
}

export default App;

(Disculpas por la terrible JSX). El problema que estoy teniendo es que tanto la barra de navegación y la pantalla de carga carga al mismo tiempo. Estoy seguro de cómo ocultar todos mis otros componentes hasta que la animación está terminado. Todo intento es waaay complicado y realmente no parece muy eficiente en todo. Agradezco cualquier ayuda gracias!