component not loading properly .Its also greyed out. The app is simple with just a single component with just a div in it.However I cant seem to import it.Never had this problem before.Maybe I am missing something idk.I am struggling with this for the last 5 hours .maybe problem with my system.plz help .

Code for counterr.js

import React from 'react'

function counterr () {
    return (
        <div>
            hello from counter
        </div>
    );
}

export default counterr;

code for app.js

import react from 'react';
import './App.css';
import counterr from './components/counterr'

function App() {
  return (
    <div>
    1234
     <counterr/>
    5678
    </div>
  )
}

export default App;

counterr component

app.js

Rendering the app doesnt load counterr component