Should not import the named export 'Component' (imported as 'Component') from default-exporting module (only default export is available soon)

Question

I updated my version of create-react-app, and when starting the develop server it gives me errors saying that like this in all my components

"ERROR in ./src/App.js 32: 15-28 Should not import the named export 'navbar' (imported as 'navbar') from default-exporting module (only default export is available soon)"

app.js code:

import React, { useState, useEffect } from 'react';
import './App.css';

import Navbar from './components/navbar/Navbar';
import Header from './components/header/Header';
import About from './components/about/About';
import Experience from './components/experience/Experience';
import Projects from './components/projects/Projects';
import Contact from './components/contact/Contact';

import {
  navbar,
  header,
  about,
  experience,
  projects,
  contact,
} from './config.json';

function App() {
  const [scrollHeight, setScrollHeight] = useState(0);

  const handleScroll = () => {
    const position = window.pageYOffset;
    setScrollHeight(position);
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
  }, [scrollHeight]);

  return (
    <div className="App">
      {navbar.status ? (
        <Navbar information={navbar} isScrolling={scrollHeight} />
      ) : null}
      {header.status ? <Header information={header} /> : null}
      {about.status ? <About information={about} /> : null}
      {experience.status ? <Experience information={experience} /> : null}
      {projects.status ? <Projects information={projects} /> : null}
      {contact.status ? <Contact information={contact} /> : null}
    </div>
  );
}

export default App;

my navbar component path is ./components/navbar/Navbar.js, Navbar.js code:

import React from 'react';
import propTypes from 'prop-types';
import './Navbar.css';

const Navbar = ({ isScrolling, information }) => {
  const toTheTop = () => {
    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
  };

  return (
    <nav className={`navbar ${isScrolling > 20 ? 'scrolling' : null}`}>
      <div
        className={`navbar-logo ${isScrolling > 20 ? 'scrolling-logo' : null}`}
        onClick={toTheTop}
      >
        <p>{information.name}</p>
      </div>

      <div
        className={`navbar-links box ${
          isScrolling > 20 ? 'scrolling-links' : null
        }`}
      >
        <ul>
          {information.directions.map((direction) => {
            if (direction.status === true) {
              return (
                <li key={direction.key}>
                  <a href={direction.url}>{direction.name}</a>
                </li>
              );
            } else {
              return null;
            }
          })}
        </ul>
      </div>
    </nav>
  );
};

export default Navbar;

Navbar.propTypes = {
  isScrolling: propTypes.number.isRequired,
  information: propTypes.object.isRequired,
};

the application works but shows a modal, with those errors, just like in the console