function is missing in type but required in type 'Props'

I am passing a function to my MapComponent:

type Props = {
  results: SearchResult[];
  ...
  onDirectionsPress: (
    latitude: number,
    longitude: number,
    sitename: string,
  ) => void;
};

const MapTab = ({
  results,
  fuelType,
  searchDistance,
  addressName,
  onDirectionsPress,
}: Props) => (
  <View style={styles.container}>
    ...
    <MapComponent results={results} {...onDirectionsPress} />
  </View>
);

In my MapComponent, it is appearing as undefined, with the above error in TypeScript, How can I pass my function into my MapComponent?

type Props = {
  results: SearchResult[];
  onDirectionsPress: (
    latitude: number,
    longitude: number,
    sitename: string,
  ) => void;
};

const MapComponent = ({ results, onDirectionsPress }: Props) => {

  console.log('here', results, onDirectionsPress); <<< undefined 

  return (
    <View style={styles.container}>
      <MapView
        ref={mapRef}
        minZoomLevel={2} // default => 0
        maxZoomLevel={15}
        provider={PROVIDER_GOOGLE}
        style={styles.map}>
        {Markers}
      </MapView>
      {showCard && <SearchResultCard {...resultProps} />}
    </View>
  );
};



export default MapComponent;

>Solution :

You should be passing onDirectionsPress with onDirectionsPress={onDirectionsPress} instead of {...onDirectionsPress}:

<MapComponent results={results} onDirectionsPress={onDirectionsPress} />