Lines only appear if in DOM on initial load, will not appear if added to DOM later

[minamesephy]

Example: https://codesandbox.io/s/heuristic-hooks-nhiic?file=/src/App.js

I have some points and I want to hide the line and the points initially when the page loads.
However, once the user does some action (in this simplified example, when they click the "Hello" button) then the line should appear.

However, only the dots appear (the ones that the line is supposed to connect). The line itself does not appear unless I cause some other state change to occur, like if I drag the dot so that the line moves.

Is this an issue with my configuration or is there a way around this issue?

Showing the line all the time https://codesandbox.io/s/stoic-smoke-w3zk6?file=/src/App.js works if the component is rendered from the beginning

Showing the line only after some state is updated does not show line unless I force another state update:
https://codesandbox.io/s/heuristic-hooks-nhiic?file=/src/App.js (click "Hello" - only dots appear, but not line - it doesn't seem to even be appearing in the DOM)

[ErnieBernie10]

I have the same problem. Any work around or solution?

[kdeloach]

Adding delay="0" should fix this.