Having styling issues with React Calendar

Question

So I have been trying to add a React calendar component to my webpage. The below shows the js file and the css file respectively

import React, { useState } from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';
import './Interviewscheduling.css';

function InterviewScheduling() {
  const [date, setDate] = useState(new Date());

  const onChange = date => {
    setDate(date);
  };

  const tileClassName = ({ date }) => {
    const currentDate = new Date();
    const currentMonth = currentDate.getMonth();
    const currentYear = currentDate.getFullYear();
    const selectedMonth = date.getMonth();
    const selectedYear = date.getFullYear();

    if (selectedMonth === currentMonth && selectedYear === currentYear) {
      return 'custom-current-month';
    } else {
      return 'custom-other-month';
    }
  };

  return (
    <div className="InterviewScheduling">
      <header className="InterviewScheduling-header">
        <h1>Interview Scheduling</h1>
      </header>
      <div className="calendar-container">
        <Calendar
          onChange={onChange}
          value={date}
          tileClassName={tileClassName}
        />
      </div>
      <div className="appointment-form">
        <h2>Add Appointment</h2>
        <form>
          <label>Date:</label>
          <input type="text" value={date.toDateString()} disabled />
          <label>Time:</label>
          <input type="time" />
          <label>Appointment Description:</label>
          <textarea></textarea>
          <button type="submit">Add Appointment</button>
        </form>
      </div>
    </div>
  );
}

export default InterviewScheduling;

The CSS file is below

/* Calendar Styles */
.InterviewScheduling {
  text-align: center;
  font-family: Arial, sans-serif;
}

/* Current month dates */
.react-calendar__month-view__days__day--neighboringMonth {
  color: #ccc; /* Grey color for dates from other months */
}

/* Active date */
.react-calendar__tile--active {
  background-color: #007bff; /* Background color for active (selected) date */
  color: white; /* Text color for active (selected) date */
}

/* Appointment Form Styles */
.calendar-container {
  margin: 20px auto;
  max-width: 400px;
}

.appointment-form {
  max-width: 400px;
  margin: 20px auto;
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
}

.appointment-form h2 {
  margin-bottom: 20px;
}

.appointment-form form {
  display: flex;
  flex-direction: column;
}

.appointment-form label {
  margin-bottom: 5px;
  font-weight: bold;
}

.appointment-form input[type="text"],
.appointment-form input[type="time"],
.appointment-form textarea {
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.appointment-form button {
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.appointment-form button:hover {
  background-color: #007bff;
}

Here is how the calendar looks on the webpage

The dates in the current month are in white text specifically only Monday to Friday, and the buttons above are white as well, which are used to control the year and month shown. I tried a lot of different things, but nothing is working. Appreciate any help

This page is part of a dashboard with a navabar, and when clicked on the Interview Scheduling it shows the above page

Here is the files for the dashboard

import React, { useState } from 'react';
import Navbar from './Employeenavbar';
import Profile from './Employeeprofile';
import AssignedJobs from './Assignedjobs';
import InterviewScheduling from './Interviewscheduling';
import '../css/Employeedashboard.css'; // Import CSS file
import { Link } from 'react-router-dom';
import profileImage from '../images/user.png';

function Dashboard() {
    const [activeTab, setActiveTab] = useState('Profile');

    const handleTabChange = (tab) => {
        setActiveTab(tab);
    };

    return (
        <div className="employee-dashboard-container"> 
        <div className="navbar">
            <ul>
            <li className={activeTab === 'Assigned Jobs' ? 'active' : ''} onClick={() => handleTabChange('Assigned Jobs')}>Assigned Jobs</li>
            <li className={activeTab === 'Interview Scheduling' ? 'active' : ''} onClick={() => handleTabChange('Interview Scheduling')}>Interview Scheduling</li>
            <li className={activeTab === 'Profile' ? 'active' : ''} onClick={() => handleTabChange('Profile')}>
                <Link to="/profile">
                    <img src={profileImage}  alt="Profile" style={{ width: '50px', height: '50px', position: 'relative', top: '10px', left: '10px' }} />
                </Link>
            </li>
            </ul>
        </div>
        <div className="employee-content"> {/* Apply CSS class */}
            {/* Render content based on activeTab */}
            {activeTab === 'Profile' && <Profile />}
            {activeTab === 'Assigned Jobs' && <AssignedJobs />}
            {activeTab === 'Interview Scheduling' && <InterviewScheduling />}
        </div>
        </div>
    );
}
  
  export default Dashboard;

Css file for the above

.employee-dashboard-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .navbar ul {
    list-style-type: none;
    padding: 0;
    margin-bottom: 20px;
  }
  
  .navbar li {
    display: inline;
    margin-right: 20px;
    cursor: pointer;
  }
  
  .navbar li.active {
    font-weight: bold;
  }