endShape prop does not work properly ArcherContainer

[pierpo]

The following code gives this

If we remove endShape=..., it gives this result instead:

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { ArcherContainer, ArcherElement } from "react-archer";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <ArcherContainer
          strokeColor="yellow"
          endShape={{ circle: { radius: 2 } }}
        >
          <div style={{ display: "flex" }}>
            <ArcherElement id="first">
              <div>first</div>
            </ArcherElement>
            <ArcherElement
              id="second"
              relations={[
                {
                  targetId: "first",
                  targetAnchor: "right",
                  sourceAnchor: "left"
                }
              ]}
            >
              <div style={{ marginLeft: 100 }}>second</div>
            </ArcherElement>
          </div>
        </ArcherContainer>
      </header>
    </div>
  );
}

export default App;