I am unable to pass props in link react router

Question

How to pass props in a Link react router? I've tried multiple ways using state and location, but was unsuccessful.

const Footer = (props) => {

  const { cart, handleIncrement, handleDecrement, quantity } = props;

  const [toggle, setToggle] = useState(false);

  const cartPrice = cart.reduce((accum,item) => accum + item.qty * item.price, 0);
  const cartLength = cart.reduce((accum,item) => accum + item.qty, 0);

  const handleToggle = () => {
    setToggle(pre => !pre);
  }



  console.log(cart);
  return (
    <>
    <div className='footer'>
        <div className="left-sec">
            <div className="cart-details">
                <span className='cart-items'> {cartLength} Items</span>
                <span className='cart-price'>Total ₹{cartPrice} </span>
            </div>
            <button className="up" onClick={handleToggle}>
              ^
            </button>
        </div>
          <Link to='/checkout' className='login-sec'>
              <span className='heading'>Continue</span>
              <span className='arrow'>→</span>
          {console.log(cart)}
          </Link>
    </div>
    {toggle && <Cart cart={cart} quantity={quantity} handleIncrement={handleIncrement} handleDecrement={handleDecrement} cartPrice={cartPrice} close={()=> setToggle(false)}/>}
    </>
  )
}

export default Footer;

I want to pass cart, cartPrice, handleIncrement , handleDecrement to Link to checkout. please help me out.