Смотри есть несколько способов:
1) вешаешь клик на див, и меняешь состояние к примеру const [activeState, setActiveState] = useState(false); Клик будет менять activeState таким образом setActiveState(prev => !prev); То есть при каждом клике activeState будет либо true, либо false. Твой див будет выглядеть следующим образом

<div className={`sidebar ${activeState ? 'active' : ''}`}>

Не обязательно писать это внутри дива и не обязательно через тернарник, эту логику ты можешь вынести в отдельную функцию которая будет возвращать тебе классы по условию. Только смотри что каждая раскрывашка должна быть отдельным компонентом , чтобы у нее было свое состояние иначе все раскрывашки будут одновременно раскрываться))).
2) event.target и event.currentTarget в реакте никто не отменял. Ты можешь через клик и event.currentTarget получить элемент по которому кликнул и ванильным js навесить класс.
3) используй ref для доступа к дом https://reactjs.org/docs/refs-and-the-dom.html и также добавляй класс через обычные методы js

Невнимательно прочитал документы в первый раз. Проблема была в настройке конфигурации. Для Realtime Database в конфигурации забыл указать ссылку на базу данных, и получить ссылку на сервис

import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
  // The value of `databaseURL` depends on the location of the database
  databaseURL: "https://DATABASE_NAME.firebaseio.com",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Realtime Database and get a reference to the service
const database = getDatabase(app);