PolyLine Not showing With ReactLeaflet

Question

return (

<>
  <MapContainer center={position} zoom={12} scrollWheelZoom={true} style={{"height" : "500px" , "width" : "500px"}} whenReady={handleMapInit} >
    <TileLayer
      attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    
   
    <MarkerComponent callBackUpdatePolyline = {updatePolyline}/>
    <Polyline pathOptions={purpleOptions} positions={polyline}/>
  
  </MapContainer>

  
</>   

);

This is Map component of my app , Whenever A marker is added I get a polyline of all the waypoints (Used HEREMAP API ), then decoding and adding coordinates, I send it to my parent component , where I change the polyline State, with updatePolyline like this:

  const [polyline , setPolylines] = useState([]);



const purpleOptions = { color: 'purple' };


  // let pressTimer;
  const updatePolyline = function(data){
    // console.log("coordinates  mapComponent")
    // console.log(data);
    setPolylines(data);
    
  }

But I cannot see polyline in my map, I can see data, after printing in my console(usingPolyline function)

I am new to react-leaflet, cannot figure out what is wrong

Here is how i decoded polyline, there could be a problem with this

 routeSection.forEach(sec => {
      const encodedPolyline = sec.polyline;
      const decodedPolyline = decode(encodedPolyline);
      coordinates = [...coordinates , ...decodedPolyline];
      
    });
    
    
    return coordinates;
    enter code here