Zoom image on hover

https://codesandbox.io/s/wizardly-grass-2cv76m?file=/src/MyReactImageMagnify.js

import { ArrowUpRight } from "lucide-react";
import React from "react";

import { getOrderByIdAPI } from "@/utils";
import MyOrderCard from "./components/MyOrderCard";

export default async function MyOrderPage() {
  const uid = "6525c166fb721037a5de1164";
  const { data } = await getOrderByIdAPI(uid);
  return (
    <>
      <div className="py-14 px-4 md:px-6 2xl:px-20 2xl:container 2xl:mx-auto">
        {data?.map((myOrder: any) => (
          <MyOrderCard key={myOrder?._id} myOrder={myOrder} />
        ))}
      </div>
    </>
  );
}

"use client";
import { ArrowUpRight } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import React from "react";

export interface MyOrdersPropsI {
  _id: string;
  uid: string;
  pid: string;
  qty: number;
  status: string;
  orderDate: string;
  shiftedDate: string;
  deliveredDate: string;
  paymentType: string;
  paymentStatus: boolean;
  address: string;
  name: string;
  mobile: string;
  __v: number;
  createdAt: Date;
  updatedAt: Date;
}

type MyOrdersPropsT = {
  myOrder: MyOrdersPropsI;
};

const MyOrderCard = ({ myOrder }: MyOrdersPropsT) => {
  // console.log("myOrders=>", myOrder);

  return (
    <>
      <Link href="/user/orders">
        <div className="flex max-w-2xl flex-col mb-2  items-center rounded-md border md:flex-row">
          {/* <div className="h-full w-full md:h-[200px] md:w-[300px]">
          <Image
            width={100}
            height={100}
            src="https://images.unsplash.com/photo-1522199755839-a2bacb67c546?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fGJsb2d8ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=60"
            alt="Laptop"
            className="h-full w-full rounded-md object-cover"
          />
        </div> */}
          <div>
            <div className="p-4">
              <h1 className="inline-flex items-center text-lg font-semibold">
                Order id: {myOrder?.orderDate}{" "}
                <ArrowUpRight color="blue" className="ml-2 h-4 w-4" />
              </h1>
              <p className="mt-3 text-sm text-gray-600">
                Order date: {myOrder.orderDate}
              </p>
              <div className="mt-4">
                <span className="mb-2 mr-2 inline-block rounded-full bg-gray-100 px-3 py-1 text-[12px] font-semibold text-gray-900">
                  Payment Type: {myOrder.paymentType}
                </span>
                <span className="mb-2 mr-2 inline-block rounded-full bg-green-100 px-3 py-1 text-[12px] font-semibold text-gray-900">
                  Payment Status: {myOrder.paymentStatus && "Success"}
                </span>
              </div>
              <div className="mt-3 flex items-center space-x-2">
                {/* <img
                className="inline-block h-8 w-8 rounded-full"
                src="https://overreacted.io/static/profile-pic-c715447ce38098828758e525a1128b87.jpg"
                alt="Dan_Abromov"
              /> */}
                <span className="flex flex-col">
                  <span className="text-[12px] font-medium text-gray-900">
                    Order Status
                  </span>
                  <span className="bg-green-200 rounded-full p-[4px] text-center text-[10px] font-extrabold text-gray-800">
                    {myOrder?.status}
                  </span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </Link>
    </>
  );
};

export default MyOrderCard;