Type Annotations can only be used in TypeScript Files and parsing error in REACT-NATIVE

I am currently learning react native and trying to create UBER CLONE. But i am facing certain issues regarding Type annotations and Parsing. Also whenever i rename my app.js into app.jsx it stops working and i have to switch it back to app.js. Error is in line number 30 and 31. Someone Help me to fix this.

Here is the code.

import React, {useState} from 'react';
import {View, TextInput, SafeAreaView} from 'react-native';
import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';

import styles from './styles';

const DestinationSearch = props => {
  const [fromText, setFromText] = useState({initalState: ''});
  const [destinationText, setDestinationText] = useState({initalState: ''});

  const [originPlace, setOriginPlace] = useState({initalState: 'null'});
  const [destinationPlace, setDestinationPlace] = useState({initalState:'null'});
  return (
    <SafeAreaView>
      <View style={styles.container}>
        <TextInput
          value={fromText}
          onChangeText={setFromText}
          style={styles.textInput}
          placeholder="From"
        />
        <TextInput
          value={destinationText}
          onChangeText={setDestinationText}
          style={styles.textInput}
          placeholder="Where to?"
        />
        <GooglePlacesAutocomplete
          placeholder="Where to?"
          onPress={(data:GooglePlaceData, details:GooglePlaceDetail | null = null) => {
            setDestinationPlace(value:{data, details});
          }}
          fetchDetails
          query={{
            key: 'AIzaSyB3rsn2ecpXZ8p9d8J_kLIH59rxt9KV6Rs',
            language: 'en',
          }}
        />
      </View>
    </SafeAreaView>
  );
};

export default DestinationSearch;

Error is :

Parsing error: Unexpected token, expected ":"

  29 |           placeholder="Where to?"
  30 |           onPress={(data:GooglePlaceData, details:GooglePlaceDetail | null = null) => {
> 31 |             setDestinationPlace(value:{data, details});
     |                                            ^
  32 |           }}
  33 |           fetchDetails
  34 |           query={{