初回レンダリング前にuseLayoutEffectにてDOM操作（クラス付与）を行いたい

Question

実現したいこと

ReactにてFullCalenderを用いてカレンダーアプリを実装しています。
APIで取得した特定の日付リストに対してクラスを付与したいと考えています。

発生している問題

そこで次のコードを実装しましたが、初回レンダリング時にクラス付与が行われません。（axiosまでは実行されているようです）
React内（特にuseLayoutEffect）内でのDOM操作について、あまり知見がなくご教授いただけましたら幸いです。

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