Props Passing 2 objects when only 1 is needed, React - reactjs

Question

So I am trying only to pass one value, but it has currently two values here. It's passing the selected hive, and an additional array. I tried removing props but then it won't pass anything. I tried adding another hook for it but I may be doing it incorrectly. Any assistance is greatly appreciated!
App.js
// General Imports
import { Routes, Route } from "react-router-dom";
import "./App.css";
// Pages Imports
import HomePage from "./pages/HomePage/HomePage";
import LoginPage from "./pages/LoginPage/LoginPage";
import RegisterPage from "./pages/RegisterPage/RegisterPage";
import AddHivePage from "./pages/AddHive/AddHive";
import UpdateHivePage from "./pages/UpdateHivePage/UpdateHivePage";
import InspectionPage from "./pages/InspectionPage/InspectionPage";
// Component Imports
import Navbar from "./components/NavBar/NavBar";
import Footer from "./components/Footer/Footer";
// Util Imports
import PrivateRoute from "./utils/PrivateRoute";
import { useState } from "react";
function App() {
const [selectedHive, setSelectedHive] = useState('')
return (
<div>
<Navbar />
<Routes>
<Route
path="/"
element={
<PrivateRoute>
<HomePage setSelectedHive={setSelectedHive} />
</PrivateRoute>
}
/>
<Route path="/register" element={<RegisterPage />} />
<Route path="/login" element={<LoginPage />} />
<Route path="/addhive" element={<PrivateRoute><AddHivePage /></PrivateRoute>}/>
<Route path="/hives/update/:id" element={<PrivateRoute><UpdateHivePage selectedHive={selectedHive} /></PrivateRoute>}/>
<Route path="/inspections/all/:id" element={<PrivateRoute><InspectionPage selectedHive={selectedHive} /></PrivateRoute>}/>
</Routes>
<Footer />
</div>
);
}
Homepage
import React from "react";
import { Link } from "react-router-dom";
import Hive from "../../components/Hive/Hive";
const HomePage = (props) => {
return (
<div className="container">
<Hive setSelectedHive={props.setSelectedHive} />
<Link to="/addhive">Add Hive!</Link>
</div>
);
};
export default HomePage;
Inspection component
import React, { useState, useEffect } from 'react';
import DisplayInspections from '../DisplayInspections/DisplayInspections';
import useAuth from '../../hooks/useAuth';
import axios from 'axios';
const Inspections= (selectedHive, props) => {
const [user, token] = useAuth();
const [inspections, setInspections] = useState([]);
useEffect(()=>{
fetchInspections(props.setSelectedValue);
}, [])
const fetchInspections = async () => {
try {console.log(selectedHive)
let response = await axios.get(`http://127.0.0.1:8000/api/inspections/all/${selectedHive}`, {
headers: {
Authorization: "Bearer " + token,
},
});
setInspections(response.data);
} catch (error) {
console.log(error.response.data);
}
};
return (
<div className="container">
<h1>List of Inspections</h1>
<DisplayInspections inspections={inspections} setSelectedHive={props.setSelectedHive} />
</div>
);
}
export default Inspections;
This is where I am trying to send the data from for my axios call.
Display.jsx
import React from "react";
import { useNavigate } from "react-router-dom";
const DisplayHives = ({hives, setSelectedHive}) => {
const navigate = useNavigate()
function handleClick(id){
setSelectedHive(id);
navigate(`/hives/update/${id}`)
}
function handleClickInspection(id){
setSelectedHive(id);
navigate(`/inspections/all/${id}`)
}
return (
<>
<table>
<tbody>
{hives.map((hive)=> {
return(
<tr key={hive.id} >
<td>{hive.hive_number}</td>
<td>{hive.inspection_date} </td>
<td> <button onClick={() => handleClickInspection(hive.id)}>Inspections</button></td>
<td>
<button onClick={() => handleClick(hive.id)}>Update</button>
</td>
</tr>
)
})}
</tbody>
</table>
</>
);
}
export default DisplayHives;