Mis aplicaciones tienen calendario (usando FullCalender).
Quiero dar clase a los elementos usando querySelectorAll antes de la primera representación.
Entonces, uso React Hooks useLayoutEffect. Pero no funciona.
Por favor, dime cómo resolver este problema.

 let availableDateList = []; const Calender = () => { const setAvailableDateListClass = () => { availableDateList.map((availableDate) => document .querySelectorAll('[data-date="' + availableDate + '"]') .forEach((date) => date.classList.add("available")) ); }; useLayoutEffect(() => { const fetchData = async () => { const res = await axios(API_URL); let data = await res.data; data.map((e) => availableDateList.push(e.date)); }; fetchData(); setAvailableDateListClass(); }, []); const calenderRenderHandling = (e) => { setAvailableDateListClass(); }; return ( <> <FullCalendar plugins={[dayGridPlugin, interactionPlugin]} initialView="dayGridMonth" events={callenderEvents} eventOverlap={false} datesSet={calenderRenderHandling} /> </> ); }; export default Calender;

 "axios": "^0.27.2", "react": "^18.1.0", "react-dom": "^18.1.0", "react-scripts": "^5.0.1", "@fullcalendar/daygrid": "^5.11.0", "@fullcalendar/interaction": "^5.11.0", "@fullcalendar/react": "^5.11.1",