React Invalid hook call with wordpress guttenberg

Question

I am working with WordPress Gutenberg blocks and am trying to build a timeline using timeline js. The edit part of the code is working great, but the save part is not working and is throwing

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

The code for the save page is

import { useEffect } from "@wordpress/element";
import { useBlockProps } from "@wordpress/block-editor";

export default function save({ attributes }) {
  const blockProps = useBlockProps.save();
  const { files } = attributes;

  useEffect(() => {
    new TL.Timeline("timeline-save-embed", files);
  }, [files]);

  return (
    <>
      <div {...blockProps}>
        <div className="timeline-container">
          <div
            id="timeline-save-embed"
            style={{ width: "100%", height: "600px" }}
          ></div>
        </div>
      </div>
    </>
  );
}

Answer 1

The issue is that WordPress Gutenberg accepts pure functions on the frontend/ Save part of the code and does not accept side effects in the frontend, so the only workaround currently is to, use dynamic blocks written in PHP