My Apps has Calender(Using FullCalender).
I want to give class to elements by using querySelectorAll before first rendering.
So, I use React Hooks useLayoutEffect. But It doesn't work.
Please tell me how to solve this probrem.

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",