title: Using react-native-calendars, how to pass the pressed date back into 'markedDates' prop?
body: <p>Goal: Be able to select 2 dates on a calendar using <code>react-native-calendars</code> using the <code>onDayPress</code> prop, and use the result in <code>markedDates</code> prop to form a period of days. </p>
  
  <p>Component.js: </p>
  
  <pre><code>import React, { useState, useEffect } from 'react';
  import { Image, View, Animated, StyleSheet, TouchableOpacity, Dimensions } from 'react-native';
  import EStyleSheet from 'react-native-extended-stylesheet';
  import { Calendar } from 'react-native-calendars';
  
  const { width } = Dimensions.get('window');
  
  const CalendarPicker = (props) =&gt; {
      const [ markedDates, setMarkedDates ] = useState({});
  
      const markDate = (dateString) =&gt; {
          setMarkedDates(
              (markedDates[dateString] = {
                  endingDay: true,
                  color: 'blue'
              })
          );
      };
  
      useEffect(() =&gt; {});
  
      return (
          &lt;Calendar
              style={{
                  width: width * 0.8
              }}
              theme={{
                  arrowColor: '#219F75'
              }}
              minDate={Date()}
              onDayPress={({ dateString }) =&gt; markDate(dateString)}
              hideArrows={false}
              hideExtraDays={true}
              hideDayNames={false}
              markedDates={markedDates}
              markingType={'period'}
          /&gt;
      );
  };
  
  export default CalendarPicker;
  </code></pre>
  
  <p>Problem: Nothing happens. the date isn't "marked", the useState variable is assigned the data correctly though. Wondering if its a re-render issue? How can this be resolved to display the selected date as "marked"?</p>