how to resolve the React must be in scope when using JSX

I am getting this error,

3:9 error 'React' must be in scope when using JSX react/react-in-jsx-scope

I have read and searched on multiple sites, to include React on the top. Now that i have added, but still getting the error. Any help will be much appreciated, I am in the Learning phase, got stuck!

import React from 'react';
import { Route } from  'react-router-dom';

import AllMeetupsPage from "./pages/AllMeetups";
import Favorites from "./pages/Favorites";
import NewMeetup from "./pages/NewMeetups";

function App() {
  return (
    <div>
      <Route path="/">
        <AllMeetupsPage></AllMeetupsPage>
      </Route>
      <Route path="/new-meetup">
        <NewMeetup></NewMeetup>
      </Route>
      <Route path="/favorites">
        <Favorites></Favorites>
      </Route>
    </div>
  );
}

export default App;