React page just disappears

Question

I recently tried using react for a website that lists all freelancers, but now when I try to access a specific freelancer's site, it just shows a blank page. My code is here:

App.js

import Navbar from './Navbar';
import Home from './Home';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Create from './Create';
import Freelancerdetails from './FreelancerDetails';

function App() {

  return (
    <Router>
      <div className="App">
        <Navbar />
        <div className="content">
          <Switch>
            <Route exact path="/">
              <Home />
            </Route>
            <Route exact path="/create">
              <Create />
            </Route>
            <Route path="/freelancers/:username" >
              <Freelancerdetails />
            </Route>
          </Switch>
        </div>
      </div>
    </Router>
  );
}

export default App;

FreelancerDetails.js

import { useParams } from "react-router-dom";

const Freelancerdetails = () => {
    const { username } = useParams();

  return (
    <div className="freelancer-details">
      <h2>Freelancer details - { username }</h2>
    </div>
  );
}
 
export default Freelancerdetails;

Home.js

import { useState, useEffect } from "react";
import BlogList from "./BlogList";

const Home = () => {
  const [freelancers, setFreelancers] = useState([
    { skills: 'Not loading', name: 'mario', id: 1, homepage: "https://zetax.dev" },
  ])
  const [isPending, setisPending] = useState(true);

  useEffect(() => {
        const fetchData = async () => {
          const response = await fetch("https://149-56-112-99.my.local-ip.co/", {
          });
            const data = await response.json();
            const newFreelancers = data.slice(0, 50);
            setFreelancers(newFreelancers);
            setisPending(false);
        }
        fetchData();
    }, []);

  return (
    <div className="home">
      { isPending && <div>Fetching data...</div> }
      <BlogList freelancers={freelancers} title="All Freelancers" />
      <a href="https://zetax.dev" className="watermark">Made by Zetax</a>
    </div>
  );
}
 
export default Home;

BlogList.js

import { faTrash } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Link } from 'react-router-dom';

const BlogList = ({ freelancers, title, }) => {

    return (
        <div className="blog-list">
            <h2>{title}</h2>
            {freelancers.map(blog => (
                <div className="blog-preview" key={blog.id} >
                    <h2><Link to={ "/freelancers/" + blog.name}>{blog.name}</Link></h2>
                    <p>Skills: {blog.skills}</p>
                    <a href={blog.homepage}>Visit Homepage</a>
                </div>
            ))}
        </div>
    );
}

export default BlogList;

Logs:

    at resolveDispatcher (react.development.js:1476:1)
    at useContext (react.development.js:1484:1)
    at useParams (hooks.js:40:1)
    at Freelancerdetails (FreelancerDetails.js:5:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
resolveDispatcher @ react.development.js:1476
useContext @ react.development.js:1484
useParams @ hooks.js:40
Freelancerdetails @ FreelancerDetails.js:5
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonym) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
./src/index.js @ index.js:6
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonym) @ startup:7
(anonym) @ startup:7
react-dom.development.js:20085 The above error occurred in the <Freelancerdetails> component:

    at Freelancerdetails (http://localhost:3000/static/js/bundle.js:358:66)
    at Route (http://localhost:3000/static/js/bundle.js:45424:29)
    at Switch (http://localhost:3000/static/js/bundle.js:45626:29)
    at div
    at div
    at Router (http://localhost:3000/static/js/bundle.js:45055:30)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:44677:35)
    at App

I really hope someone would be willing to help me as it's a really frustrating issue to deal with! Greetings, Finn