Bug when adding multiple features one by one to map

Question

I am currently working on school project and I am desperate because I have tried everything within past hours....

I am listening with useEffect on checkbox change. When checkbox is checked I add route feature to map with user's route properties like color and width which I fetch from DB

This is the code:

useEffect(() => {
    if (props.addRoute) {
      let feature = new Feature();
      let coordinates = [];
      props.addRoute.geometry.coordinates.forEach((coordinate) => {
        coordinates.push(fromLonLat(coordinate));
      });

      const color = props.addRoute.properties.route_color;
      const width = props.addRoute.properties.route_width;

      feature.setId(props.addRoute.id);
      feature.setGeometry(new LineString(coordinates));
      feature.setStyle(
        new Style({
          zIndex: featuresLayer.getSource().getFeatures().length,
          stroke: new Stroke({
            color: color,
            width: width,
          }),
        })
      );
      featuresLayer.getSource().addFeature(feature);


      //FOR DEMOSTRATION
      console.log(featuresLayer.getSource().getFeatures());
     //

    }
  }, [props.addRoute]);

This is code for removal of feature from map:

 useEffect(() => {
    if (props.removeRoute) {
      let feature = featuresLayer
        .getSource()
        .getFeatureById(props.removeRoute.id);
      featuresLayer.getSource().removeFeature(feature);
    }
  }, [props.removeRoute]);

I do not know how it is possible but when I start the adding sequence with first BLACK and then RED it goes as it should but when I add first RED and then BLACK it just makes both of them RED. I consoled logged everything and everything seems fine to me. As you can see in first Code section I console log features from FeatureLayer which is currently added to map.

In first Image I am adding features in sequence BLACK -> RED.

In second image I am adding features in sequende RED -> BLACK.

I am hoping that someone can help me solve this mistery because I am tired of going over and over this code and everytime finding nothing wrong with it...

If someone need more code samples please just say. But this is the "mistery" part of code.

Thanks alot!

EDIT:

import React from "react";

import "./tables.css";

const RouteTable = (props) => {
  const formatDate = (date) => {
    let localDate = new Date(date);
    let currentDate = new Date();
    if (
      localDate.getDay() == currentDate.getDay() &&
      localDate.getMonth() == currentDate.getMonth() &&
      localDate.getFullYear() == currentDate.getFullYear()
    ) {
      return localDate.toLocaleTimeString();
    } else {
      return localDate.toLocaleString();
    }
  };

  return (
    <>
      <div className="routeTable">
        <table>
          <thead>
            <tr>
              <th>Title</th>
              <th>Modified</th>
              <th>Detail</th>
              <th>Show</th>
            </tr>
          </thead>
          <tbody>
            {props.routeData &&
              props.routeData.map((route) => (
                <tr key={route["id"]}>
                  <td>{route["properties"]["title"]}</td>
                  <td>{formatDate(route["properties"]["modified_at"])}</td>
                  <td>
                    <img
                      src="../../../static/images/detail.png"
                      alt="detail"
                      width="20"
                      height="20"
                      onClick={() => props.toggleModal(route)}
                    />
                  </td>
                  <td>
                    <input
                      type="checkbox"
                      onChange={(e) => props.handleCheckbox(e, route)}
                    />
                  </td>
                </tr>
              ))}
          </tbody>
        </table>
      </div>
    </>
  );
};

export default RouteTable;

And this is the handleCheckbox function from above onChange call

  const handleCheckbox = (e, content) => {
    if (e.target.checked) {
      setAddRoute(content);
      setRemoveRoute(false);
    } else {
      setRemoveRoute(content);
      setAddRoute(false);
    }
  };

Answer 1

I am not entirely sure, but one reason can be that you are using the wrong color code for adding the black stroke, you are using #fffff (5 characters instead of 6), and that's why as a default it gets converted to black, ideally, it should be white, for black color code should be #000000. And in the 2nd case maybe after adding red, it becomes the default color code, and when you enter the wrong code for black #fffff, it reverts to default (red). Can you give it a try?