react xarrows not render properly when site load first time

When site load first lines are not properly connect to given elements

After reload page once lines are properly connect to given elements

this is my diagram.js component

import React from "react";
import Xarrow, { Xwrapper } from "react-xarrows";
import './Diagram.css';

class Diagram extends React.Component{
    constructor(props) {
            super(props);
            this.state = {
              lines:[
                    {       
                    start:"test3",
                    end:"test1" ,
                    color:'green',
                    path:'grid',
                    dashness:{ animation: 1 },
                    showHead:false
                    },
                    {       
                    start:"test3",
                    end:"test2" ,
                    color:'green',
                    path:'grid',
                    dashness:{ animation: 1 },
                    showHead:false
                    },
                    {       
                    start:"test3",
                    end:"test4" ,
                    color:'green',
                    path:'grid',
                    dashness:{ animation: 1 },
                    showHead:false        
                    },
                    {       
                    start:"test3",
                    end:"test5" ,
                    color:'green',
                    path:'grid',
                    dashness:{ animation: 1 },
                    showHead:false        
                    },
                    ]
            }
    }

    render(){
            return(
                    <Xwrapper>
                            <div className="bulma-col columns is-2 is-multiline is-mobile">

                                    <div className="column is-4">
                                    <img className="icon is-medium" src='' alt="test1" id="test1"/>
                                    <div>test1</div>
                                    </div> 
                                    
                                    <div className="column is-4"></div>

                                    <div className="column is-4">
                                            <img className="icon is-medium" src='' alt="test2" id="test2" />
                                            <div>test2</div>
                                    </div>
                                    <div className="column is-4"></div>

                            
                                    <div className="column is-4">
                                            <img className="icon is-medium" src='' alt="test3" id="test3" />
                                            <div>test3</div>
                                    </div>
                                    <div className="column is-4"></div>

                                    <div className="column is-4">
                                            <img className="icon is-medium" src='' alt="test4" id="test4" />
                                            <div>test4</div>
                                    </div>
                                    <div className="column is-4"></div>
                                    
                                    <div className="column is-4">
                                            <img className="icon is-medium" src='' alt="test5" id="test5" />
                                            <div>test5</div>
                                    </div>
                                    {this.state.lines.map((line,i)=>(<Xarrow key={i} {...line} />))}
                            </div>
                    </Xwrapper>
            )
        
    }
}
export default Diagram;

I tried to figure a way to fix this bug. I tried to create lines in state. I googled this but have no any solution.can someone help me to figure this out