I have a custom block that has been updated a couple of times now. When I try to save the post that contains the said block, it gives me the following error:

Content generated by the save function:

<div class="wp-block-spacer block-spacer block-undefined spacer"> </div>

Content retrieved from post body:

<div class="spacer"> </div>

My save.js file:

const { Component } = wp.element;
import classnames from "classnames"

export default class Save extends Component {
  constructor() {
    super(...arguments);
  }

  render() {
    const {
      block_id,
    } = this.props.attributes;

return (<div className={classnames(
  this.props.className,
  "block-spacer",
  `block-${block_id}`,
  "spacer"
)}> </div>);


}
}

My index.js file:

// Import block dependencies and components
import Edit from "./components/edit";
import Save from "./components/save";
import attributes from "./attributes";
import deprecated from "./components/deprecated";

// Import CSS
import "./styles/style.scss";
import "./styles/styles.editor.scss";

// Internationalization
const { __ } = wp.i18n;

// Register block
const { registerBlockType } = wp.blocks;

// Register the block
registerBlockType("spacer", {
  title: __("Spacer", "abc"),
  
  keywords: [
    __("spacer", "abc"),
  ],
  attributes: attributes,
  /* Render the block in the editor. */
  edit: (props) => {
    return <Edit {...props} />;
  },

  /* Save the block markup. */
  save: (props) => {
    return <Save {...props} />;
  },

  deprecated: deprecated,
});

My deprecated.js

import classnames from "classnames";
import attributes from "../attributes";
const { Component } = wp.element;

const deprecated = [
  {
    save: function (props) {
      const {
        setAttributes,
      } = props;

      return <div class="spacer"> </div>;
    },
  },
  {
    // attributes,
    attributes: attributes,
    save: function (props) {
      const { block_id } = props.attributes;
      return <div className={classnames(
        "block-spacer",
        `block-${block_id}`,
        "spacer"
      )}> </div>
    },
  },
];

export default deprecated;

From the research I have done, it is easy to know that the issue is being caused because "this.props.className" is being added to the save.js. But even though I have added the deprecated.js, why is it still giving me the error?

Any help in resolving this issue would be much appreciated. Thank you!