Firebase: Checking for existing displayName before allowing user to register

Question

Before allowing a user to register, I want to do a database check to see if the username already exists. Tried following this and this StackOverflow post.

I expected the user would not be able to log in, however, the user is still allowed to log in :(

Register.js

import React, { useContext, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import firebase from '../firebase';
import { UserContext } from '../userContext';

export const Register = () => {
  const navigate = useNavigate();

  const [emailAddress, setEmailAddress] = useState('');
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const currentUser = useContext(UserContext);

  const handleSubmit = async event => {
    event.preventDefault();
    try {
      await firebase
        .auth()
        .createUserWithEmailAndPassword(emailAddress, password);
      navigate('/');
    } catch {}
  };

  useEffect(() => {
    (async () => {
      if (currentUser) {
        await currentUser?.updateProfile({
          displayName: username,
        });
        const usernamesRef = firebase.database().ref('usernames');
        const newUsername = {
          [username]: currentUser.uid,
        };
        usernamesRef.push(newUsername);
        const usersRef = firebase.database().ref('users');
        const newUser = {
          [currentUser.uid]: {
            email: emailAddress,
            username,
          },
        };
        usersRef.push(newUser);
      }
    })();
  }, [currentUser, emailAddress, username]);

  useEffect(() => {
    if (currentUser) {
      navigate('/');
    }
  }, [currentUser, navigate]);

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label htmlFor="email-address">Email Address: </label>
        <input
          id="email-address"
          onChange={event => setEmailAddress(event.target.value)}
          value={emailAddress}
        />
        <label htmlFor="username">Username: </label>
        <input
          id="username"
          onChange={event => setUsername(event.target.value)}
          value={username}
        />
        <label htmlFor="password">Password: </label>
        <input
          id="password"
          onChange={event => setPassword(event.target.value)}
          type="password"
          value={password}
        />
        <button type="submit">Register</button>
      </form>
    </div>
  );
};

Firebase Realtime Database rules based on this StackOverflow answer:

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null",
    "users": {
      "$uid": {
        ".write": "auth !== null && auth.uid === $uid",
        ".read": "auth !== null && auth.provider === 'password'",
        "username": {
          ".validate": "!root.child('usernames').child(newData.val()).exists() || root.child('usernames').child(newData.val()).val() == $uid"
        }
      }
    }
  }
}

Repo for reference