Why does the react-sortable-hoc basic example fail to compile with typescript?

Here is the basic example from the react-sortable-hoc webpage.

import React, {Component} from 'react';
import {render} from 'react-dom';
import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';

const SortableItem = SortableElement(({value}) =>
  <li>{value}</li>
);

const SortableList = SortableContainer(({items}) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
      ))}
    </ul>
  );
});

class SortableComponent extends Component {
  state = {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
  };
  onSortEnd = ({oldIndex, newIndex}) => {
    this.setState({
      items: arrayMove(this.state.items, oldIndex, newIndex),
    });
  };
  render() {
    return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;
  }
}

render(<SortableComponent/>, document.getElementById('root'));

I had to alter the code above very slightly to fit with typescript import syntax, and the screenshot below shows the errors I am unsure how to fix:

Here is the code corresponding to the above screenshot:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';

const SortableItem = SortableElement(({value}) =>
  <li>{value}</li>
);

const SortableList = SortableContainer(({items}) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
      ))}
    </ul>
  );
});

class SortableComponent extends React.Component {
  state = {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
  };
  onSortEnd = ({oldIndex, newIndex}) => {
    this.setState({
      items: arrayMove(this.state.items, oldIndex, newIndex),
    });
  };
  render() {
    return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;
  }
}

ReactDOM.render(<SortableComponent/>, document.getElementById('root'));

I don't know how to parse the error text of these errors. Since the project has 5k+ stars on GitHub, I assume I have some sort of config issue, but I can't seem to figure out what it is.

These are the two remaining errors:

1.

[ts] Property 'items' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes

2.

[ts] Property 'value' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes

The error text reads to me like it's not picking up the component wrapping syntax up correctly, but I am unfamiliar with this syntax myself so I'm not sure if I've diagnosed the problem correctly or how to fix it.

Thanks for the help.

The code in the basic example in the docs is JavaScript.

Here is the basic example converted to TypeScript:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { arrayMove, SortableContainer, SortableElement } from 'react-sortable-hoc';

const SortableItem = SortableElement(({value}: {value: string}) =>
  <li>{value}</li>
);

const SortableList = SortableContainer(({items}: {items: string[]}) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
      ))}
    </ul>
  );
});

class SortableComponent extends React.Component<{}, {items: string[]}> {
  constructor(props: {}) {
    super(props);
    this.state = {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6']
    }
  }
  public render() {
    return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;
  }
  private onSortEnd = ({oldIndex, newIndex}: {oldIndex: number, newIndex: number}) => {
    this.setState({
      items: arrayMove(this.state.items, oldIndex, newIndex),
    });
  };
}

ReactDOM.render(<SortableComponent/>, document.getElementById('root'));