How to use Immer with Typescript

I'm trying to use Immer with my react project which is already using Typescript. I couldn't find in the docs, or anywhere else, how to actually use immer with typescript.

What I have so far:

export interface IProps { }

export interface IState {
  names: string[]
}

export class ListNames extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props)
    this.state = { names: [] }
  }

  addName = (name: string) => {
    this.setState(produce(draftState => {
      draftState.names.push(name)
    }))
  }
  ...
}

this gives me two errors:

1. [ts] Object is possibly 'null'
2. [ts] Property 'names' does not exist on type 'DraftObject<Pick<IState, never>>'

Setting the type for draftState to IState won't work. What I've done that made it work was to cast the draftState to IState before I use it.

The thing is: I might want to use draftState more than one time, so it is at least inconvenient.

What's the correct way to use Immer with Typescript?