When trying to route to a different screen, I keep getting the error message "The matching leaf route at location "/home" has no element or component. This means it will render one with a null value by default, causing the page to be empty."

import './App.css'; import { BrowserRouter as Router, Routes, Route } from "react-router-dom" import React from "react"; import Home from './Screens/Home'; import Sleep from './Screens/Sleep'; import Brew from './Screens/Brew'; import Navigation from './Navigation'; import Steam from './Screens/Steam'; function App() { return( 
    } /> } /> } /> } />   
 ) } export default App;

Navigation.js, bottom tab navigation for routing between screens

import React from 'react'; import { Nav, NavItem } from 'reactstrap' import { NavLink } from 'react-router-dom'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faSearch, faHome, faUserCircle } from '@fortawesome/free-solid-svg-icons'; const tabs = [{ route: "/home", icon: faHome, label: "Home" },{ route: "/sleep", icon: faSearch, label: "Sleep" },{ route: "/brew", icon: faUserCircle, label: "Brew" },{ route: "/steam", icon: faUserCircle, label: "Steam" }] const Navigation = (props) => { return ( 
 {/* Bottom Tab Navigator*/}  
 ) }; export default Navigation;

I have tried multiple solutions with no success. I have a feeling this has something to do with me mixing multiple code snippets and trying to fit them together.