Drawing semitransparent arrows in svg

I have an arrow React component, which draws an arrow over the board with given code. The problem is when I want to draw a semitransparent arrow, it looks ugly, as the area of shapes coalision becomes darker.

How I can fix it considering that its important to make arrow point exact on the coords given from props?

const Arrow = ({ from, to, customArrowColor }) => (
  <Fragment>
    <defs>
      <marker
        id="arrowhead"
        markerWidth="2"
        markerHeight="2.5"
        refX="1.25"
        refY="1.25"
        orient="auto"
      >
        <polygon
          points="0 0, 2 1.25, 0 2.5"
          style={{ fill: "rgba(28, 195, 42, 0.35)" }}
        />
      </marker>
    </defs>
    <line
      x1={from.x}
      y1={from.y}
      x2={to.x}
      y2={to.y}
      style={{
        stroke: "rgba(28, 195, 42, 0.35)",
      }}
      markerEnd="url(#arrowhead)"
    />
  </Fragment>
);

You could use opaque colors and change your <line> elements opacity instead:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

body {
    margin: 0;
    font-size: 1.5em;
    line-height: 1.3em;
    background-image: url("data:image/svg+xml, %3Csvg viewBox='0 0 10 9' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M0 0 L10 0 L10 9' stroke-width='1' fill='none' stroke='%23eee' /%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 10px;
}

<!-- language: lang-html -->

<svg viewBox="0 0 100 100">
  <marker id="arrowhead" markerWidth="2" markerHeight="2.5" refX="1.25" refY="1.25" orient="auto">
    <polygon points="0 0, 2 1.25, 0 2.5" fill="rgba(28, 195, 42, 1)"  />
  </marker>
    <line x1="0" y1="50" x2="50" y2="50" opacity="0.5" stroke="rgba(28, 195, 42, 1)" stroke-width="5"  style="marker-end:url(#arrowhead)" />
</svg>

<!-- end snippet -->