Arrow color go out of sync with link color when link.color or link.highlightColor is updated

[chetanladha]

Describe the bug
Arrow (Marker) color does not change when link.color or link.highlightColor is updated. This result in very bad user experience.

To Reproduce
Steps to reproduce the behavior:

1. Run dev server by tying npm run dev
2. Open http://localhost:3002/?data=small in browser
3. Click directed checkbox. At this point the arrow color and highlightColor are in sync with link color and highlightColor of link.
4. Change link.color to some other value. Let's say green
5. Change link.highlightColor to some other value. Let's say orange
6. Notice that link color changes to green correctly, but arrow color still remain grey.
7. Hover over a node or link. Notice that link color on hover changes to orange correctly but arrow color still remain blue.

Expected behavior
Arrow color should change with link color.

Screenshots

• Link and arrow color mismatch in normal mode

• Link and arrow color mismatch when hover over node/link

Environment:

• OS: MacOS
• Browser: Chrome
• Version Version 84.0.4147.105 (Official Build) (64-bit)
• Node version v12.16.1
• react-d3-graph version 2.5.0
• d3 version 5.5.0
• react version 16.4.1

Additional context
Our application allow user to choose between light and dark theme. We set link color and highlight color to text color for theme. When the graph is loaded initially, both link and arrow color are in sync. But when user switches theme, the arrow color remain same, giving a bad user experience.