I use userouter to get the url of the current page and use the clipboard to copy, but the copied content is object object I expect it return an url.What problem in my code

import CopyToClipboard from "react-copy-to-clipboard";
import React,{ useState } from "react";
import { useRouter } from "next/dist/client/router";

const clip = () => {

  const {asPath} = useRouter()

    const [state, setState] = useState({
      value:{asPath},
      copied: false,
    });

    return(
        <>
     <Stack 
    position='fixed'
    bottom="0"
    css={{ backdropFilter: 'blur(10px)' }}
    w="100%"
    h="25px">

        <CopyToClipboard text={state.value}
          onCopy={() => setState({copied: true})}>
        <Box as='button' >
      <BsShare/>
        </Box>
        </CopyToClipboard>
    </Stack>
    </>
  );
};

export default clip