React Router Not Rendering Register Component on Route Change

I am having trouble with my React application using react-router-dom where my components are not rendering correctly when navigating to different routes. Here are the details of my setup:

App.js:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Register from './components/Register';
import Login from './components/Login';
import Companies from './components/Companies';
import './App.css';

function App() {
    return (
        <Router>
            <div className="App">
                <header className="App-header">
                    <h1>Welcome to Medicinska Oprema App</h1>
                    <p>Your React application is running!</p>
                </header>
                <Switch>
                    <Route path="/register" component={Register} />
                    <Route path="/login" component={Login} />
                    <Route path="/companies" component={Companies} />
                </Switch>
            </div>
        </Router>
    );
}

export default App;

Register.js:

import React, { useState } from "react";
import axios from 'axios';

const Register = () => {
    const [formData, setFormData] = useState({
        email: '',
        password: '',
        firstName: '',
        lastName: '',
        city: '',
        country: '',
        phoneNumber: '',
        occupation: '',
        company: ''
    });

    const handleChange = (e) => {
        setFormData({
            ...formData,
            [e.target.name]: e.target.value
        });
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        axios.post('/api/users/register', formData)
            .then(response => {
                alert('Registration successful!');
            })
            .catch(error => {
                alert('Error registering user.');
            });
    };

    return (
        <div>
            <h1>Register Component</h1>
            <form onSubmit={handleSubmit}>
                <input type="text" name="email" value={formData.email} onChange={handleChange} placeholder="Email" />
                <input type="password" name="password" value={formData.password} onChange={handleChange} placeholder="Password" />
                <input type="text" name="firstName" value={formData.firstName} onChange={handleChange} placeholder="First Name" />
                <input type="text" name="lastName" value={formData.lastName} onChange={handleChange} placeholder="Last Name" />
                <input type="text" name="city" value={formData.city} onChange={handleChange} placeholder="City" />
                <input type="text" name="country" value={formData.country} onChange={handleChange} placeholder="Country" />
                <input type="text" name="phoneNumber" value={formData.phoneNumber} onChange={handleChange} placeholder="Phone Number" />
                <input type="text" name="occupation" value={formData.occupation} onChange={handleChange} placeholder="Occupation" />
                <input type="text" name="company" value={formData.company} onChange={handleChange} placeholder="Company" />
                <button type="submit">Register</button>
            </form>
        </div>
    );
};

export default Register;

When I navigate to http://localhost:3001/register, the page does not display the Register component. Instead, it shows the default “Edit src/App.js and save to reload” page.

What I’ve tried:

I have verified that the paths are correct.
I have checked that the components are correctly imported.
I have no errors in the browser console or network tab.

Project Dependencies (package.json):

{
  "name": "medicinska-oprema-frontend",
  "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.7.2",
    "cross-env": "^7.0.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.23.1",
    "react-scripts": "^5.0.1",
    "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 would greatly appreciate any help or suggestions on how to fix this issue. Thank you!