How do i style the tiles in react-calendar dynamically

Question

I am using react-calendar and I have added the starter css file in my own custom css file and linked it to my react component and I have an object array with dates

import "./Calendar.css";
import Calendar from "react-calendar";

const dateData=[{date : '09/09/23'},{date:'24/09/23'},{date:'30/09/23'}]
<Calendar />

However what i want to do is, add the following css to tiles whose dates are included in the dateData array

.react-calendar__tile ::after {
  content: "o";
  position: relative;
  color: red;
  height: 8px;
  width: 8px;
  border-radius: 8px;
  background-color: red;
}

this css will just basically display a circluar dot , but currently its being displayed like this My current Calendar Component , but i want it to only show that dot when that specific date is also present in the dateData array

I tried before and after both and tried to add them , but it didnt really work