React-konva : 'Stage' is not exported by node_modules/react-konva/lib/ReactKonva.j

Question

My aim was to introduce the following code into my existing react web application below. https://codesandbox.io/s/oxwx9q9ko6?file=/src/index.js:0-3896

I first stated off by just creating a simple-react app which included the code below and it worked perfectly:

import React, { Component } from "react";
import Konva from "konva";
import { render } from "react-dom";
import { Stage, Layer, Group, Line, Rect } from "react-konva";

class RoiComponent extends Component {
  state = {
    points: [],
    curMousePos: [0, 0],
    isMouseOverStartPoint: false,
    isFinished: false
  };

  componentDidMount() {
    console.log(window.innerHeight);
  }

  render() {

    // [ [a, b], [c, d], ... ] to [ a, b, c, d, ...]
    const flattenedPoints = points
        .concat(isFinished ? [] : curMousePos)
        .reduce((a, b) => a.concat(b), []);
    return (
        <Stage
            width={window.innerWidth}
            height={window.innerHeight}
            onMouseDown={handleClick}
            onMouseMove={handleMouseMove}
        >
          <Layer>
            <Line
                points={flattenedPoints}
                stroke="black"
                strokeWidth={5}
                closed={isFinished}
            />
            {points.map((point, index) => {
              const width = 6;
              const x = point[0] - width / 2;
              const y = point[1] - width / 2;
              const startPointAttr =
                  index === 0
                      ? {
                        hitStrokeWidth: 12,
                        onMouseOver: handleMouseOverStartPoint,
                        onMouseOut: handleMouseOutStartPoint
                      }
                      : null;
              return (
                  <Rect/>
              );
            })}
          </Layer>
        </Stage>
    );
  }
}

export default RoiComponent;

Then I wanted to include the above code into my existing react web-application. So I made the above code into a component and started to call it as shown below (i.e its < RoiComponent />)

import React, {Component} from 'react';
import { Page, Grid } from 'tabler-react';
import RoiComponent from "./components/RoiComponent"
class RoiPage extends Component {
  render() {
    return (
        <RoiComponent/>
    )
  }
}

export default RoiPage;

After doing this, when I build the application I keep getting this error

Error: 'Stage' is not exported by node_modules/react-konva/lib/ReactKonva.js

My package.json is the following

{
  "name": "smt",
  "version": "1.0.0",
  "main": "dist/index.js",
  "module": "dist/index.es.js",
  "jsnext:main": "dist/index.es.js",
  "engines": {
    "node": ">=8",
    "npm": ">=5"
  },
  "peerDependencies": {
    "react": "^15.0.0 || ^16.12.0",
    "react-dom": "^15.0.0 || ^16.12.0"
  },
  "dependencies": {
    "js-file-download": "^0.4.8",
    "konva": "^7.2.0",
    "moment": "^2.24.0",
    "react-image-lightbox": "^5.1.1",
    "react-konva": "^17.0.0-0",
    "react-router-dom": "^5.1.2",
  }
}

Any reasons why this isn't working?