Unable to customize custom routes / waypoints

[aftabhussain6]

Hi, I have react native app that runs with an iot device. I am defining waypoints but not able to customize it. Here is the code that I have right now. Also check the video which shows the functionality I want to achieve.

const renderWayPoints = () => {
const styles = {
icon: {
iconImage: 'wayPointImg',
iconSize: 0.3,
iconAllowOverlap: true,
},
};

return (
  <>
    <MapboxGL.ShapeSource
      id="wayPointsSource"
      shape={wayPoints as any}
      >
      <MapboxGL.Images images={{ wayPointImg: wayPoint }} />
      <MapboxGL.SymbolLayer
        minZoomLevel={1}
        id="wayPointsIcon"
        belowLayerID="boatIcon"
        style={styles.icon}
      />
    </MapboxGL.ShapeSource>
  </>
);

};

Demo Video Link:

VID-20231115-WA0028.mp4