Trying to make a warning that disappears in 3 seconds

Creator.tsx

// import { useState } from "preact/hooks";
import { useState, useEffect, useRef } from "preact/hooks";
import { Handlers, PageProps } from "$fresh/server.ts";
import UserDb from "../database.ts";

interface CreatorProps {
    email: string,
    key: string
}

export default function Creator(props: CreatorProps) {
  const [alertPointer, setAlertPointer] = useState(0);
  const [alertInst, setAlertInst] = useState("");

  // When the pointer changes, set the alertInst 

  useEffect(() => {
    if (alertPointer === 0) { 
      setAlertInst("");
      return; 
    }
    if (alertPointer === 1) {
      setAlertInst(
        <div class="bg-blue-100 border-t border-b border-blue-500 text-blue-700 px-4 py-3" role="alert">
          <p class="font-bold">User Creation Succeeded</p>
          <p class="text-sm">A new user was added to the database</p>
        </div>
      );
      return
    }
    setAlertInst(
      <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
        <strong class="font-bold">User Creation Failed</strong>
        <span class="block sm:inline">Are you sure you entered in a valid email and key?</span>
        <span class="absolute top-0 bottom-0 right-0 px-4 py-3">
          <svg class="fill-current h-6 w-6 text-red-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
        </span>
      </div>
    )
  }, [alertInst]);

  // When the alertInst changes
  useEffect(() => { // After 3 seconds, set the pointer so that nothing is shown
    const timeId = setTimeout(() => { setAlertPointer(0); }, 3000);
    return () => {
      clearInterval(timeId);
    };
    
  }, [alertInst]);
  
  async function handleSubmit(event) {
    event.preventDefault();
    const emailInput = event.target.email;
    const ageInput = event.target.key;
    const resp = await createNewUser(emailInput.value, ageInput.value);
    return resp
  };

  async function createNewUser(email, key) {
    const rawPosts = await fetch('http://localhost:8000/api/createUser', {
      "method": "POST",
      "headers": {
        "content-type": "application/json"
      },
      "body": JSON.stringify({
        email: email,
        key: key,
      })
    });
    const respns = JSON.parse(await rawPosts.json());
    if (respns.isUserCreated) {
      setAlertPointer(1);
    }
    else {
      setAlertPointer(2);
    }
  }
    return (
      <div>
        {alertInst}
        <h1 class="text rounded-lg p-4 my-8"> Search </h1>
        <form method="post" onSubmit={async (e) => handleSubmit(e)}>
          <input class="center rounded-lg p-4 my-8" id="email" name="email" />
          <input class="center rounded-lg p-4 my-8" id="key" name="key" />
          <br />
          <button
              class="px-5 py-2.5 text-sm font-medium bg-blue-600 rounded-md shadow disabled:(bg-gray-800 border border-blue-600 opacity-50 cursor-not-allowed)"
              type="submit">Submit
          </button>
        </form>
        <br />
        {/* <ul>
          {results.map((name) => <li key={name}>{name}</li>)}
        </ul> */}
      </div>
    );
  };