Javascript – How do I make my navigation icon appear in mobile mode for a ReactJS and TailwindCSS app

I’ll appreciate help with my bug.
I have a ReactJS and TailwindCSS application. The navigation displays fine in desktop mode but in mobile mode, the navigation or hamburger icon doesn’t appear.

My App.jsx file is in the path: travelworld/src/component/Navbar.jsx

import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import { FaTimes, FaBars } from 'react-icons/fa'

const Navbar = () => {
    const [showNavigationForMobile, setShowNavigationForMobile] = useState(false);
    return (
        <nav className='fixed m-4 top-0 right-0 left-0 shadow-lg z-50 bg-white'>
            <div className='container px-4 flex justify-between items-center h-16'>
                <h3 className='text-2xl font-bold'>Travel</h3>
                {!showNavigationForMobile && (
                <div className='md:show flex space-x-4 text-sm font-bold items-center'>
                    <Link to="/" className='px-6 py-2 hover:bg-gray-600 hover:text-white'>Home</Link>
                    <Link to="/gallery" className='px-6 py-2 hover:bg-gray-600 hover:text-white'>Gallery</Link>
                    <Link to="/contact" className='px-6 py-2 hover:bg-gray-600 hover:text-white'>Contact</Link>
                    <Link to="/about" className='px-6 py-2 hover:bg-gray-600 hover:text-white'>About</Link>
                    <button className='py-2 px-6 border bg-gray-400'>Login</button>
                </div>
                )}
                <div className='md:hidden'>
                    <button onClick={() => setShowNavigationForMobile(!showNavigationForMobile)}>
                    {showNavigationForMobile ? <FaTimes /> : <FaBars />}
                    </button>
                </div>
            </div>
            {showNavigationForMobile && (
            <div className='flex space-y-6 py-4 flex-col bg-white items-center'>
                <Link to="/" className='px-6 py-2 hover:bg-gray-600 hover:text-white'>Home</Link>
                <Link to="/gallery" className='px-6 py-2 hover:bg-gray-600 hover:text-white'>Gallery</Link>
                <Link to="/contact" className='px-6 py-2 hover:bg-gray-600 hover:text-white'>Contact</Link>
                <Link to="/about" className='px-6 py-2 hover:bg-gray-600 hover:text-white'>About</Link>
                <button className='py-2 px-6 border bg-gray-300'>Login</button>
            </div>
            )}
        </nav>
    )
}

export default Navbar

My Home.jsx file is in the path: travelworld/src/pages/Home.jsx

import React from "react";
import PopularDestination from '../component/PopularDestination';
import Services from '../component/Services';
import Clients from '../component/Clients';

const Home = () => {
    return (
        <>
            <div className='relative h-screen bg-cover bg-center' style={{backgroundImage : "url('/images/hotel_paris.jpg')"}}>
                <div className='absolute inset-0 bg-black bg-opacity-50 flex flex-col items-center justify-center'>
                    <h1 className='text-4xl md:text-6xl font-bold text-white mb-4'>Explore the world with us</h1>
                    <p className='text-lg md:text-2xl text-white mb-8'>Discover amazing places at exclusive deals</p>
                    <button className='border text-white px-6 py-2 rounded-full text-lg md:text-xl hover:bg-blue-500 transform transition duration-300 hover:scale-105'>Get started</button>
                </div>
            </div>
            <PopularDestination />
            <Services />
            <Clients />
        </>
    );
}

export default Home;

My App.jsx file is in the path: travelworld/src/App.jsx

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import Navbar from "./component/Navbar";

const App = () => {
  return (
    <BrowserRouter>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />}></Route>
      </Routes>
    </BrowserRouter>
  );
};

export default App;

My package.json file is in the path: travelworld/package.json

{
  "name": "travelworld",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-icons": "^5.3.0",
    "react-router-dom": "^6.26.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.8.0",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "autoprefixer": "^10.4.20",
    "eslint": "^9.8.0",
    "eslint-plugin-react": "^7.35.0",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.9",
    "globals": "^15.9.0",
    "postcss": "^8.4.41",
    "tailwindcss": "^3.4.9",
    "vite": "^5.4.0"
  }
}