react/no-unused-prop-types no working when use `{...this.state}`

HI ALL, I found a problem with react/no-unused-prop-types rule. When I use {...this.state} syntax in React component, the rule can't find the unused prop. I don't know is this a bug with eslint-plugin-react? Please Help. Thanks.

Component

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  static propTypes = {
    bar: PropTypes.string.isRequired,
  };

  state = {
    style: { color: 'red' },
  };

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          // when I add `{...this.state}`, the rule is no working
          <h1 className="App-title" {...this.state} >Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

.eslintrc

{
  "extends": "react-app",
  "rules": {
    "react/no-unused-prop-types": [
      "error",
      {
        "customValidators": [],
        "skipShapeProps": true
      }
    ]
  }
}

versions

• eslint: 4.10.0
• eslint-plugin-react: 7.4.0

Reproduce problem repos

https://github.com/zhaozhiming/eslint-plugin-react-no-unused-prop-types