react-native-calendar : apply custom multi marking with popup

I am using react-native-calendar to make my project.

I want to do this: When the user selects a date, a popup modal will appear and the user could select up to three events vacation, message, workout. For example, If the user selects vacation and message, I want two dots to appear in the calendar.

So far I am able to make the popup modal appear when the I pick a date, but I don't know how I could make the dots appear in the calendar.

This is my code:

const vacation = {key:'vacation', color: 'red', selectedDotColor: 'blue'};
const massage = {key:'massage', color: 'blue', selectedDotColor: 'blue'};
const workout = {key:'workout', color: 'green'};

export default class CalendarsScreen extends Component {
  initialState = {
     [_today]: {disabled: false}
 }

 constructor() {
   super();

   this.state = {
     _markedDates: this.initialState,
     isOpen: false,
     isDisabledOne: false,
     isDisabledTwo: false,
     isDisabledThree: false,
   }
 }



onDaySelect = (day) => {
     const _selectedDay = moment(day.dateString).format(_format);
     let selected = true;
     if (this.state._markedDates[_selectedDay]) {
       selected = !this.state._markedDates[_selectedDay].selected;
     }
     const updatedMarkedDates = {...this.state._markedDates, ...{ [_selectedDay]: { selected } } }
     this.setState({ _markedDates: updatedMarkedDates });
  } 

  render() {

    var BContent = <Button onPress={() => this.setState({isOpen: false})} style={[styles.btn, styles.btnModal]}>X</Button>;

    return (
      <View style=>

      <View style={styles.wrapper}>

        <Calendar
            minDate={_today}
            onDayPress={this.onDaySelect}
            markedDates={this.state._markedDates}
        />

      <Modal style={[styles.modal, styles.modal3]} position={"center"} ref={"modal3"} isDisabled={this.state.isDisabled}>
        <Text style={styles.text}>vacation</Text>
        <Button onPress={() => this.setState({isDisabledOne: !this.state.isDisabledOne})} style={styles.btn}>({this.state.isDisabledOne ? "YES" : "NO"})</Button>
        <Text style={styles.text}>massage</Text>
        <Button onPress={() => this.setState({isDisabledTwo: !this.state.isDisabledTwo})} style={styles.btn}>({this.state.isDisabledTwo ? "YES" : "NO"})</Button>
        <Text style={styles.text}>workout</Text>
        <Button onPress={() => this.setState({isDisabledThree: !this.state.isDisabledThree})} style={styles.btn}>({this.state.isDisabledThree ? "YES" : "NO"})</Button>
      </Modal>

        </View>
      </View>
    );
  }
}

Can anyone help? Any advise or comments would be appreciated!

from react-native-calendar : apply custom multi marking with popup