Let TimelinePanel only send a receipt if there is an event

src/components/structures/TimelinePanel.tsx

@@ -1082,7 +1082,9 @@ class TimelinePanel extends React.Component<IProps, IState> {
         currentReadReceiptEventIndex: number | null,
         lastReadEvent: MatrixEvent | null,
         lastReadEventIndex: number | null,
-    ): boolean {
+    ): lastReadEvent is MatrixEvent {
+        if (!lastReadEvent) return false;
+
         // We want to avoid sending out read receipts when we are looking at
         // events in the past which are before the latest RR.
         //
@@ -1133,7 +1135,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
         const lastReadEventIndex = this.getLastDisplayedEventIndex({
             ignoreOwn: true,
         });
-        const lastReadEvent: MatrixEvent | null = this.state.events[lastReadEventIndex ?? 0];
+        const lastReadEvent: MatrixEvent | null = this.state.events[lastReadEventIndex ?? 0] ?? null;
 
         const shouldSendReadReceipt = this.shouldSendReadReceipt(
             currentReadReceiptEventId,

test/components/structures/TimelinePanel-test.tsx

@@ -242,6 +242,18 @@ describe("TimelinePanel", () => {
             TimelinePanel.roomReadMarkerTsMap = {};
         });
 
+        it("when there is no event, it should not send any receipt", async () => {
+            setUpTimelineSet();
+            await renderTimelinePanel();
+            await flushPromises();
+
+            // @ts-ignore
+            await timelinePanel.sendReadReceipts();
+
+            expect(client.setRoomReadMarkers).not.toHaveBeenCalled();
+            expect(client.sendReadReceipt).not.toHaveBeenCalled();
+        });
+
         describe("when there is a non-threaded timeline", () => {
             beforeEach(() => {
                 setUpTimelineSet();