React useParams() doesnt work mapsStateToProps function, and ownProps comes back undefined

"i am using react dom v6, my goal here is to get the id fro the url and use that to determine which expense data to edit, when i try to use useParams() i get the error that i am using hooks incorrectly, but my ownProps is undefined as expected, i am confused how to do this"

this is Edit.js page

    import {connect} from "react-redux";
    import {useParams, useNavigate} from "react-router-dom";
    import ExpenseForm from "./ExpenseForm";
    import {editExpense} from "../actions/expensesAction";
    
    const Edit = (props) => {
        let slug = useParams().id;
        const navigate = useNavigate()
        return (
            <div>
                <ExpenseForm
                    expense={props.expense}
                    onSubmit={(expense) => {
                        props.dispatch(editExpense(props.expense.id, expense))
                        navigate(-1)
                    }}/>          
                <div>
                    <h3>
                        <b>
                            {slug}
                        </b>
                    </h3>
                </div>
            < /div>
        );
    };
    
    export default connect((state, props) => {
            const params = useParams().id;
            return (
                {
                    expense: state.reducerExpenses.find((expense) => expense.id === params)
                })
        }
    )(Edit);

this is my routes (AppRouter.js)

import React from "react";
import {BrowserRouter, Route, Routes} from "react-router-dom";
import ExpensifyDashboard from "../components/ExpensifyDashboard";
import Header from "../components/Header";
import ExpenseList from "../components/ExpenseList";
import AddExpense from "../components/AddExpense";
import Edit from "../components/Edit";
import HelpExpense from "../components/Help";
import NotFoundPage from "../components/NotFound";
import Footer from "../components/Footer";

const AppRouter = () => (
    <BrowserRouter>
        <div>
            <Header/>
            <Routes>
                <Route path="/" element={<ExpensifyDashboard/>}/>
                <Route path="expenseList" element={<ExpenseList/>}/>
                <Route path="expenseList/:id" element={<Edit/>}> </Route>
                <Route path="addExpense"  element={<AddExpense/>}/>
                <Route path="helpExpense" element={<HelpExpense/>}/>
                <Route path='*' element={<NotFoundPage/>}/>
                <Route/>
            </Routes>
            <Footer/>
        </div>
    </BrowserRouter>
);

export default AppRouter;

This is my ExpenseForm

import React from "react";
import TextField from '@mui/material/TextField';
import {AdapterLuxon} from "@mui/x-date-pickers/AdapterLuxon";
import {LocalizationProvider} from "@mui/x-date-pickers";
import {DatePicker} from "@mui/x-date-pickers";
import {DateTime} from 'luxon';

const dateLuxon = DateTime.now();  // get today's date

export default class ExpenseForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            description: props.expense ? props.expense.description : "",
            amount: props.expense ? (props.expense.amount).toString() : "",
            note: props.expense ? props.expense.description : "",
            dateCreated: props.expense ? DateTime.fromMillis(props.expense.dateCreated) : 
            dateLuxon,
            error: ''
        };

        this.onDescriptionChange = this.onDescriptionChange.bind(this);
        this.onAmountChange = this.onAmountChange.bind(this);
        this.onNoteChange = this.onNoteChange.bind(this);
        this.onDateChange = this.onDateChange.bind(this);
        this.onFocusedChange = this.onFocusedChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    }

    onDescriptionChange = (e) => {
        const description = e.target.value;
        this.setState(() => ({description}))
    }

    onAmountChange = (e) => {
        const amount = e.target.value;
        if (!amount || amount.match(/^\d{1,}(\.\d{0,2})?$/)) {
            this.setState(() => ({amount}))
        }
    }
    onNoteChange = (e) => {
        const note = e.target.value;
        this.setState(() => ({note}))
    }

    onDateChange(dateCreated) {
        if (dateCreated) {
            this.setState({dateCreated})
        }
    }

    onFocusedChange = ({focused}) => {
        this.setState(() => ({calenderFocused: focused}))
    }
    onSubmit = (e) => {
        e.preventDefault();
        if (!this.state.description || !this.state.amount || !this.state.dateCreated)
        {
            this.setState({error: "An error has been detected"});
        } else {
            this.setState({error: ""});
            const {error, ...expense} = {
                ...this.state,
                amount: parseFloat(this.state.amount),
                dateCreated: this.state.dateCreated.ts
            }
            this.props.onSubmit(expense)
        }

    }
    render() {
        return (
            <div>
                <form onSubmit={this.onSubmit}>
                    <input type='text' placeholder='Description' autoFocus value= 
                      {this.state.description}
                           onChange={this.onDescriptionChange}/>
                    <input type='string' placeholder='amount' value={this.state.amount} 
                      onChange={this.onAmountChange}/>
                    <LocalizationProvider dateAdapter={AdapterLuxon}>
                        <DatePicker
                            label='Pick a date'
                            onChange={this.onDateChange}
                            value={this.state.dateCreated}
                            renderInput={(params) => <TextField {...params} />}
                            mask="__/__/____ __:__"
                        />
                    </LocalizationProvider>
                    <textarea placeholder='Add a note' value={this.state.note} onChange= 
                      {this.onNoteChange}></textarea>
                    <button> Add Expense</button>
                    {this.state.error && <label htmlFor='error' style={{color: 'green'}}> 
                      {this.state.error} </label>
                    }
                </form>
            </div>
        )
    }
}