Html – Not able to see the component in my React app on building it

I am building a cryptotracker app using the CoinGecko API. This is my App component.

import Navbar from "./components/Navbar";
import Home from "./components/Home";
import { Route, Routes } from "react-router-dom";
import Show from "./components/Show";

function App() {
  return (
    <>
      <Navbar />
      <Routes>
        <Route index element={<Home />} />
        <Route path="/show" element={<Show />} />
      </Routes>
    </>
  );
}

export default App;

This is my index.js file:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

This is my Navbar component:

import React from "react";
import { Link } from "react-router-dom";

function Navbar() {
  return (
    <>
      <div className="nav_container">
        <div className="nav">
          <div className="navigation_menu">
            <Link to="/" className="nav_heading">
              Coiner
            </Link>
            <ul>
              <li>Home</li>
              <li>Pricing</li>
              <li>Features</li>
              <li>About</li>
              <li>Contact</li>
            </ul>
          </div>
          <div className="nav_button">
            <button>Login</button>
          </div>
        </div>
      </div>
    </>
  );
}

export default Navbar;

This is my Home component:

import React, { useEffect, useState } from "react";
import axios from "axios";
import Coin from "./Coin";
import Query from "./Query";

function Home() {
  const [coins, setCoins] = useState();
  const [query, setQuery] = useState("");
  const [components, setComponents] = useState(true);
  const [queryCoins, setQueryCoins] = useState();
  const [heading, setHeading] = useState("Trending Coins");
  useEffect(() => {
    window.scrollTo(0, 0);
    const getCoins = async () => {
      const response = await axios.get(
        "https://api.coingecko.com/api/v3/search/trending"
      );
      const result = response.data.coins;
      setCoins(result);
    };
    getCoins();
  }, []);
  const handleQueryChange = (event) => {
    const new_value = event.target.value;
    if (new_value === "") {
      setComponents(true);
      setHeading("Trending Coins");
    }
    setQuery(event.target.value);
  };
  const handleQuery = async () => {
    const response = await axios.get(
      `https://api.coingecko.com/api/v3/search?query=${query}`
    );
    const result = response.data.coins;
    setQueryCoins(result);
    setComponents(false);
    setHeading("Search Results");
  };
  const handleKeyChange = (event) => {
    if (event.key === "Enter") {
      handleQuery();
    }
  };
  return (
    <>
      <div className="outer_home_container">
        <div className="input_container">
          <input
            type="text"
            className="search_input"
            placeholder="Search for coins..."
            value={query}
            onChange={handleQueryChange}
            onKeyDown={handleKeyChange}
            maxLength={20}
          />
          <button onClick={handleQuery} className="input_button">
            <i className="fa-solid fa-magnifying-glass"></i>
          </button>
        </div>
        <h1>{heading}</h1>
        <div className="container">
          {components ? (
            coins ? (
              coins.map((key) => {
                return <Coin coin={key} key={key.item.id} />;
              })
            ) : (
              <h2>Loading...</h2>
            )
          ) : queryCoins ? (
            queryCoins.map((key) => {
              return <Query coin={key} key={key.id} />;
            })
          ) : (
            <h2>Loading...</h2>
          )}
        </div>
      </div>
    </>
  );
}

export default Home;

The main problem is that when I run my app through npm run start, it successfully renders all the components, that is Navbar and Home. but after I build my app through npm run build and run the website through live server, it only renders the Navbar component, and to render the Home component I have to click the Coiner logo, and then and only then it successfully renders the Home component and my Navbar component together.

Sorry for making any mistakes in the format, I am new to the Stackoverflow Q&As.

I tried editing my package.json file before building the application.

Here is the code:

{
  "name": "app",
  "homepage": "./",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.6.3",
    "lodash": "^4.17.21",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.21.1",
    "react-scripts": "5.0.1",
    "recharts": "^2.10.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

I changed homepage to "./" but it did not work.

And here is the website’s link.

Any help would be appreciated.