TypeScript compliant Ref handling for animating the movement of arrows about react-archer HOT 8 CLOSED

import React from 'react';
import ReactDOM from 'react-dom';
import { ArcherContainer, ArcherElement } from 'react-archer';

const rowStyle = {
  display: 'flex',
  justifyContent: 'space-between',
};
const columnStyle = {
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'flex-start',
  alignItems: 'center',
  width: '250px',
  padding: '15px',
  overflowY: 'auto',
  height: '300px',
};
const boxStyle = {
  padding: '10px',
  marginTop: '15px',
  marginBottom: '15px',
  border: '1px solid black',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
};

const strokeStyle = { strokeColor: 'gray', strokeWidth: 1 };

class App extends React.Component {
  handleScroll = () => {
    this.myRef.refreshScreen();
  };

  render() {
    return (
      <div>
        <ArcherContainer
          ref={myRef => {
            this.myRef = myRef;
          }}
        >
          <div style={rowStyle} onScroll={this.handleScroll}>
            <div style={columnStyle}>
              {Array(6)
                .fill()
                .map((val, i) => {
                  return (
                    <ArcherElement
                      id={`source${i}`}
                      relations={[
                        {
                          targetId: 'centerElement',
                          targetAnchor: 'left',
                          sourceAnchor: 'right',
                          style: strokeStyle,
                        },
                      ]}
                    >
                      <div style={boxStyle}>Source {i + 1}</div>
                    </ArcherElement>
                  );
                })}
            </div>

            <div style={columnStyle}>
              <ArcherElement
                id="centerElement"
                relations={Array(6)
                  .fill()
                  .map((val, i) => {
                    return {
                      targetId: `target${i}`,
                      targetAnchor: 'left',
                      sourceAnchor: 'right',
                      style: strokeStyle,
                    };
                  })}
              >
                <div style={boxStyle}>Central Entity</div>
              </ArcherElement>
            </div>

            <div style={columnStyle}>
              {Array(6)
                .fill()
                .map((val, i) => {
                  return (
                    <ArcherElement id={`target${i}`}>
                      <div style={boxStyle}>Target {i + 1}</div>
                    </ArcherElement>
                  );
                })}
            </div>
          </div>
        </ArcherContainer>
      </div>
    );
  }
}

const rootElement = document.getElementById('root');

ReactDOM.render(<App />, rootElement);