NextJs Image Optimization Not working with list

Question

I am building one demo project for school management. where I have created 3 layout for desktop. In one part of layout I am showing student List. But when I test this code with 1000 student list it is loading all student's images at first load. I want behaviour like when user scroll down to list only then image should load as images are saved on another platform. basically I am loading image from google auth URL.

Here is my code

const StudentListView = ({ students, refreshStudentList }) => {
  const [studentId, setStudentId] = useState(0);
  const toggleDialog = () => {
    setStudentId(0);
  };

  return (
    <>
      <div className="flex-1 overflow-y-auto scrollbar-none">
        {students &&
          students.map((student) => {
            return (
              <div
                className="w-full flex flex-row flex-1 px-4 py-2 text-slate-600 hover:bg-slate-50 hover:cursor-pointer"
                onClick={() => {
                  setStudentId(student.studentId);
                }}
                key={`${student.studentId}_${student.name}`}
              >
                <div className="relative w-12 h-12 overflow-hidden">
                  <Image
                    src={student.pic ? student.pic : "/assets/png/student.png"}
                    width={48}
                    height={48}
                    alt="student image"
                    loading="lazy"
                    objectFit="fill"
                    objectPosition="center"
                    className="rounded-full shadow my-auto h-auto"
                  />
                  <div
                    className={`${
                      student.status == 1 ? "bg-green-700" : "bg-red-700"
                    } absolute bottom-0 right-0 w-3 h-3 rounded-full`}
                  />
                </div>
                <div className="flex flex-col h-full justify-center ml-4 my-auto">
                  <p className="font-bold capitalize">{student.name}</p>
                  <p className="text-lg">{student.rollNumber}</p>
                </div>
              </div>
            );
          })}
      </div>
      {studentId != 0 ? (
        <StudentProfile
          studentId={studentId}
          closeDialog={toggleDialog}
          refreshStudentList={refreshStudentList}
        />
      ) : null}
    </>
  );
};

I am new to nextjs development yet if you need any additional info then I will provide you all.