Is there any method to overcome the error of hydration UI in next.js while using use-sse?

Question

I am using use-sse (server side rendering hook) in my next.js application but i am getting an error of "There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering." The code is all similar to the link https://github.com/kmoskwiak/useSSE. Unfortunately, I am unable to predict the error of hydration in next.js application. What's the issue in it? Here's is the code:

import { useSSE } from "use-sse";
import React from 'react';

interface Todo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

export default function Todo() {
    const [todos, error] = useSSE(() : Promise<Todo[]>=> {
      
        return fetch("https://jsonplaceholder.typicode.com/todos").then(
          (response: Response) => response.json()
        );
       
      }, []);
      console.log(todos);
      if (error) return <div>{error.message}</div>;
    
      if (!todos?.length) return <span>Todo is Loading...</span>;
    
      return (
        <section>
          <h1>Todo List</h1>
          <ul>
            {todos.map((todo: Todo) => {
              return (
                <li key={todo.id}>
                  <h6>{todo.title}</h6>
                </li>
              );
            })}
          </ul>
        </section>
      );
}

Its not even detecting the use-sse package now. Is there any other method to use this hook i.e use-sse?