React Js: тип ошибки React-Leaflet Когда я использовал первую координату для маркера

Я пытаюсь отобразить маркер на карте React-Leaflet, используя координаты, когда я использовал первый и последний индекс координат полилинии для отображения на маркере, и я все время получаю ошибку типа. Я не знаю, где ошибка. Я пытался также создать определенные координаты начала и конца, но я все время получаю одну и ту же ошибку, как решить эту проблему. вот мой код.

    import React, { Component } from "react";
    import config from "../Main";
    import { Map, TileLayer, Polyline, Marker, Popup } from "react-leaflet";
    import { withRouter } from "react-router-dom";

    class Mapp1 extends Component {
      constructor(props) {
        super(props);
        this.state = {

          mapa: [],
          center: [52.3197, 21.0152],
          cords: [],
          start: [],
          end:[],
        };
      }
      async componentDidMount() {
        let authToken = localStorage.getItem("Token");
        try {
          const res = await fetch(
            `${config.apiUrl.carmapN}${this.props.match.params.id}/`,
            {
              method: "GET",
              headers: {
                Accept: "application/json",
                "Content-Type": "application/json",
                Authorization: "Bearer " + JSON.parse(authToken)
              }
            }
          );
          const mapa = await res.json();
          // console.log(mapa);
          this.setState({
            mapa,
            cords: mapa.coordinates,
            //start: mapa.coordinates[0],
            //end: mapa.coordinates[-1]
          });
        } catch (e) {
          console.log(e);
        }
      }

      render() {
        const { mapa } = this.state;
        const { cords } = this.state;
        if (mapa === null) return <p>Loading ....</p>;
        const center = this.state.center;
        console.log("StarPint ", this.state.start);

        return (
          <div className="container" style={{ marginTop: "20px" }}>
            <div className="headerr">
              <h2 style={{ marginTop: "20px" }} className="font-weight-bolder">
                MAPS
              </h2>
              <div className="row" style={{ marginTop: "30px" }}>
                <div className="col-sm-5">
                  <Map
                    center={center}
                    zoom={9}
                    style={{ width: "520px", height: "480px" }}
                  >

// This is for startpoint marker and its showing error
                    <Marker position={cords[0]} color="red">
                      <Popup>
                        This is your Starting <br /> point at 8:45
                      </Popup>
                    </Marker>
// This is for endpoint marker and its showing error
                    <Marker position={cords[-1]} color="green">
                      <Popup>
                        {mapa.endPlace} <br /> point at {mapa.endTime}
                      </Popup>
                    </Marker> 

                    <TileLayer
                      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                      url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
                    />
                    <Polyline
                      positions={cords}
                      color={"red"}
                      lineJoin={"round"}
                      lineCap={"round"}
                      opacity={1}
                      weight={5}
                      // dashArray={"9"}
                      // dashOffset={"3"}
                      fill={false}
                      stroke={true}
                      fillRule={"evenodd"}
                      onMouseOver={e => e.target.openPopup()}
                      onMouseOut={e => e.target.closePopup()}
                    ></Polyline>
                  </Map>
                </div>
          </div>
        </div>
          </div>
        );
      }
    }

    export default withRouter(Mapp1);