'Trying to get React Redux example in TypeScript to play well with VS Code

In the Redux documentation, there is an example that is not playing well with VS Code. I am talking about the example here: https://redux.js.org/usage/usage-with-typescript#typing-the-connect-higher-order-component

Here is the code, after I added the import statement for react which was missing:

import * as React from 'react'
import { connect, ConnectedProps } from 'react-redux'

interface RootState {
  isOn: boolean
}

const mapState = (state: RootState) => ({
  isOn: state.isOn
})

const mapDispatch = {
  toggleOn: () => ({ type: 'TOGGLE_IS_ON' })
}

const connector = connect(mapState, mapDispatch)

// The inferred type will look like:
// {isOn: boolean, toggleOn: () => void}
type PropsFromRedux = ConnectedProps<typeof connector>

type Props = PropsFromRedux & {
  backgroundColor: string
}

const MyComponent = (props: Props) => (
  <div style={{ backgroundColor: props.backgroundColor }}>
    <button onClick={props.toggleOn}>
      Toggle is {props.isOn ? 'ON' : 'OFF'}
    </button>
  </div>
)

export default connector(MyComponent)

When I open that index.tsx file in VS Code, it does not find the properties:

What is wrong with the code form that example? Or is it VS Code that is having an issue?

UPDATE:

I tried my component on CodeSandbox and the editor on there does not complain at all. I tried to configure all the versions to be the same in CodeSandeBox and in VS Code, but I am certainly missing something. I am not sure though which part detects the property types, whether it is eslint, the TS compiler or something else.

https://codesandbox.io/s/redux-toolkit-class-components-forked-js2e2h?file=/src/MyComponent1/index.tsx