title: null is not an object in component state in react native
body: <p>I'm trying to implement <a href="https://www.npmjs.com/package/react-native-modal-datetime-picker" rel="nofollow noreferrer">react-native-modal-datetime-picker</a> in my app</p>
  
  <p><strong>Source code</strong></p>
  
  <pre><code>import React, { Component } from "react";
      import {
        View,
        ScrollView,
        DatePickerIOS,
        TouchableOpacity,
        Text,
        TextInput,
        Button,
        StyleSheet
      } from "react-native";
      import RBSheet from "react-native-raw-bottom-sheet";
      import data from "./static.json";
  
  import DateTimePicker from 'react-native-modal-datetime-picker'; 
  
  export default class App extends React.Component {
  
   constructor (props) {
    super(props);
    this.state = {
       cdate: '',
       setDate: '',
       isVisible: false,
       setVisible: false,
  
    };
  
    render() {
  
    const { cdate, isVisible, setDate, setVisible } = this.state;
  
      return (
        &lt;View style={styles.container}&gt;
          &lt;Text style={styles.textTitle}&gt;REACT NATIVE RAW BOTTOMSHEET&lt;/Text&gt;
          &lt;View style={styles.buttonContainer}&gt;
  
            &lt;TouchableOpacity onPress={() =&gt; this.Scrollable.open()} style={styles.button}&gt;
              &lt;Text style={styles.buttonTitle}&gt;SCROLLABLE&lt;/Text&gt;
            &lt;/TouchableOpacity&gt;     
          &lt;/View&gt;
  
          {/* Grid Menu */}
          &lt;RBSheet
            ref={ref =&gt; {
              this.Scrollable = ref;
            }}
            closeOnDragDown
            customStyles={{
              container: {
                borderTopLeftRadius: 10,
                borderTopRightRadius: 10
              }
            }}
          &gt;
            &lt;ScrollView&gt;
              &lt;View style={styles.gridContainer}&gt;
               &lt;DateTimePicker
    mode="time"
    isVisible={isVisible}
    cdate={cdate}
    onConfirm={cdate =&gt; {
      setDate(cdate.toTimeString());
      setVisible(false);
    }}
    onCancel={() =&gt; this.setState({ setVisible: false })}
  /&gt;
              &lt;/View&gt;
  
            &lt;/ScrollView&gt;
          &lt;/RBSheet&gt;
  
        &lt;/View&gt;
      );
    }
  }
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: "center",
      backgroundColor: "#F5FCFF"
    },
    textTitle: {
      fontSize: 20,
      marginTop: 120
    },
    buttonContainer: {
      alignItems: "center",
      marginTop: 50
    },
    button: {
      width: 150,
      backgroundColor: "#4EB151",
      paddingVertical: 10,
      alignItems: "center",
      borderRadius: 3,
      margin: 10
    },
  
  });
  </code></pre>
  
  <p>This is the error I'm getting</p>
  
  <p><a href="https://i.stack.imgur.com/kWd8J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kWd8J.png" alt="enter image description here"></a></p>
  
  <blockquote>
    <p>Unexpected token, expected ";" (31:11)</p>
    
    <p>29 |   };   30 |</p>
    
    <blockquote>
      <p>31 |   render() {
           |            ^   32 |   33 |   const { cdate, isVisible, setDate, setVisible } = this.state;</p>
    </blockquote>
  </blockquote>