问如何传递此错误无效钩子调用。钩子只能在函数组件的主体内调用。我正在使用React18

EN

import { connect } from "react-redux";
import { useParams } from "react-router-dom";
import ExpenseForm from "./ExpenseForm";
import { editExpense, removeExpense } from '../actions/expenses';
import {useNavigate} from 'react-router-dom';
//import { withRouter } from "react-router-dom";



function EditExpensePage (props){
 const { id } = useParams();
const navigate = useNavigate()
 return(
   <div>
           <ExpenseForm 
           expense={props.expense}
           onSubmit={(expense) =>{
             props.dispatch(editExpense(id,expense))
             navigate('/');
           }}
           />

         <button onClick={()=>{
          props.dispatch(removeExpense({id: props.expense.id}));
          navigate('/');
       }}>Remove</button>
         </div>

         
 );
};

function MapStateToProps(state){
 const { id } = useParams();
 return{
   expense: state.expenses.find((expense)=> expense.id ===  id)
 };
};

   

  export default connect(MapStateToProps)(EditExpensePage);