'React' must be in scope when using JSX error in routes.js file : <p>ESlint is showing me the above-mentioned error when writing a <code>routes.js</code> file.</p>

<pre><code>module.exports = {
  'env': {
    'browser': true,
    'es6': true
  },
  'extends': ['plugin:react/recommended', 'standard'],
  'globals': {
    'Atomics': 'readonly',
    'SharedArrayBuffer': 'readonly'
  },
  'parser': 'babel-eslint',
  'parserOptions': {
    'ecmaFeatures': {
      'jsx': true
    },
    'ecmaVersion': 2018,
    'sourceType': 'module'
  },
  'plugins': [
    'react'
  ],
  'rules': {
  }
}
</code></pre>

<p>My <code>routes.js</code></p>

<pre><code>import { Switch, Route } from 'react-router-dom'
import Feed from './pages/Feed'
import Post from './pages/Post'

function Routes () {
  return (
    &lt;Switch&gt; // -&gt; red line
      &lt;Route path="/" component={Feed} /&gt; // -&gt; red line
      &lt;Route path="/post" component={Post} /&gt; // -&gt; red line
    &lt;/Switch&gt;
  )
}

export default Routes
</code></pre>

<p>Cannot find a clear solution for such issue.</p>
