Попытка разместить изображение в фиксированной позиции. Почему изображение теряется, пока я не обновлю страницу?

Новичок здесь.

Я только начал экспериментировать с ReactJS на codeandbox. Я хочу, чтобы элемент изображения (зеленая стрелка) находился в определенной позиции над элементом шкалы. Я попробовал самый простой способ, который мог придумать, и он вроде как подходит для того, что мне нужно, но ... Когда я открываю страницу, изображение теряется, но если я обновляю страницу, изображение будет именно там, где я хочу это ... почему ?! В чем может быть причина и какие идеи как ее решить? Может быть, вы подскажете какой-нибудь другой способ позиционирования изображения в определенном месте внутри div?

Вот ссылка: https://codesandbox.io/embed/gauge-ship-engine-1-h2nhx?fontsize=14&hidenavigation=1&theme=dark&codemirror=1

Вот код:

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import ReactSpeedometer from "react-d3-speedometer";
import "bootstrap/dist/css/bootstrap.min.css";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import arrow from "./greenarrow.png";

class Gauge extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: ""
    };

    this.handleGaugeValueChange = this.handleGaugeValueChange.bind(this);
  }

  handleGaugeValueChange(e) {
    console.log(1);

    this.setState({
      value: e.target.value
    });
  }

  render() {
    return (
      <div className="center">
        <h1 className="title">Ship Engine 1</h1>

        <Container className="p-3">
          <Row>
            <Col>
              <div
                className="speedometer"
                style={{
                  width: "100%",
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center"
                }}
              >
                <img
                  src={arrow}
                  alt="greenarrow"
                  style={{
                    position: "absolute",
                    opacity: 1,
                    zIndex: "1",
                    transform: "rotate(-35deg)",
                    marginLeft: "-65px",
                    marginTop: "-80px"
                  }}
                />

                <ReactSpeedometer
                  maxValue={150}
                  ringWidth={20}
                  customSegmentStops={[0, 30, 55, 65, 90, 120, 150]}
                  segmentColors={[
                    "#FAFAFA",
                    "#FAFAFA",
                    "#007fff",
                    "#FAFAFA",
                    "#FAFAFA",
                    "#FAFAFA"
                  ]}
                  needleHeightRatio={0.72}
                  valueTextFontSize="19px"
                  needleTransitionDuration={9000}
                  needleTransition="easeElastic"
                  currentValueText="${value} kW"
                  value={this.state.value}
                />
              </div>
              <div className="divLabelReq">
                <label
                  className="labelReq"
                  htmlFor="value"
                  style={{ color: "#6b6964" }}
                >
                  Requested: 39.7kW
                </label>
              </div>
            </Col>
            <Col>
              <form className="form-settings" onSubmit={this.handleSubmit}>
                <div className="form-row">
                  <div className="form-group col-md-5">
                    <label
                      className="label"
                      htmlFor="value"
                      style={{ color: "white" }}
                    >
                      Change Gauge Value:{" "}
                    </label>
                    <input
                      type="number"
                      className="form-control"
                      name="value"
                      id="value"
                      placeholder="0"
                      onChange={this.handleGaugeValueChange}
                      value={this.state.keywords}
                    />
                  </div>
                </div>
              </form>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}

export default Gauge;

const rootElement = document.getElementById("root");
ReactDOM.render(<Gauge />, rootElement);

Заранее спасибо!