showing [object , object ] when logging state

i am passing an object as parameter of onClick callback function, which is in the Expense.jsx file like below, and receiving it inside onClick handler in the parent App.jsx file. inside onClick handler i am getting the object and can console.log it but when i set this object in state editExpense which is declared in App.jsx and console.log editExpense i get [object, object] logged to the console.

onclick handler inside App.jsx

function handleEditClick (expense){
    // console.log(expense);
    setEditExpense(expense);
  };

Expense.jsx file

import React, {useState} from "react";
import { Accordion, AccordionSummary, Typography, AccordionDetails, Box, IconButton, Tooltip, Divider } from "@mui/material";
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';


function Expense({id, expense, description, amount, date, deleteExpense, handleEditClick }) { //component code from mui Accordian component
    const [expanded, setExpanded] = useState(false);

    const handleChange = (panel) => (event, isExpanded) => {
        setExpanded(isExpanded ? panel : false);
      };

      const localDate = new Date(date).toLocaleDateString();

    return <Box display="flex" alignItems="center" flexDirection="row" width="100%">
    <Accordion className="accordian" expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
    <AccordionSummary
      expandIcon={<ExpandMoreIcon />}
      aria-controls="panel1bh-content"
      id="panel1bh-header"
    >
      <Typography sx={{ width: '33%', flexShrink: 0 }}>
        {localDate}
      </Typography>
      <Typography sx={{ color: 'text.primary' }}>
      {expense}</Typography>
    </AccordionSummary>
    <Divider/>
    <AccordionDetails>
    <Typography pb="15px">
       {`Amount : ${amount}`}
    </Typography>
    <Divider/>
      <Typography pt="5px">
        {`Description : ${description}`}
      </Typography>
    </AccordionDetails>
  </Accordion>
  <Tooltip title="Edit Expense" placement="left-start">
  **<IconButton onClick={()=>handleEditClick({expense, description, amount})} color="secondary"><EditIcon/></IconButton>**
  </Tooltip>
  <Tooltip title="Delete Expense" placement="right-start">
  <IconButton onClick={()=>deleteExpense(id)} color="secondary"><DeleteIcon/></IconButton>
  </Tooltip>
  </Box>
}

export default Expense;