react and react-dom not working, please help out

Question

I do not know why react and react-dom isn't working with my code. you can see the color of the react and react-dom text isn't even bright/clear

what can be the issue please, someone should help me out. Thanks in advance

image

App.js :

import react from "react";
import reactDom from "react-dom";
import Index from '../public/index.html'

function App() {
  return (
    <Index />
  );
}

reactDOM.render(<App />, document.getElementById("root"))

Index.js :

import react from 'react';
import reactDom from 'react-dom';
import './index.css';
import NavBar from './NavBar';
import Filter from './Filter'

export default function Index() {
  return(
    <div>
      <Filter />
      <NavBar />
    </div>
  )
}

Filter.js :

import react from 'react';
import './index.css';


export default function Filter() {
    render(
        <div id="overall-search-input_container" class="overall-search-input_container">
            <div class="input_container">
                <input type="text" class="search" id="search" placeholder="Search for an airdrop" onchange=""/>
                <i id="inputsearch-icon" class="fa-solid fa-magnifying-glass"></i>
                <i id="clear-input" class="fa-solid fa-xmark"></i>
                <button class="cancel-search" onclick="cancelSearch()">Cancel</button>
            </div>
            <div id="filter-list"></div>
            <div id="search-input_container"></div>
        </div>
    )
}

NavBar.js :

import react from "react";
import './index.css'

export default function NavBar() {
    return(
            <div id="overall-option_container">
                <div class="option-logo_container">
                    <h1 className="option-logo">AirdropInspect</h1>
                    <i id="cancel-option" className="fa-solid fa-xmark"></i>
                </div>
            </div>
    )
}

Answer 1

Inside app component your Index component file path is not correct

import react from "react";
import reactDom from "react-dom";
import Index from '../src/Index'

function App() {
  return (
   <Index />
  );
 }

import look like as this code