I have a component as such:

import classNames from "classnames";

const Button = (props) => {
  const { className, children, ...rest } = props;
  const [internalProps, setInternalProps] = useState(rest);
  const [classes, setClasses] = useState("");

  const validateProps = () => {
    const tmp: Props = Object.assign(rest, {});
    const classes = [
      "btn",
      className,
      { "btn-block": block },
      { "btn-sm": size === "sm" },
      { "btn-lg": size === "lg" },
    ];

    setClasses(classNames(classes));
    setInternalProps(tmp);
  };

  useEffect(validateProps, [props]);

  return (
    <button className={classes} {...internalProps}>
      {children}
    </button>
  );
};

The className prop is taken out of internalProps because for whatever reason, when included in it, the classes aren't applied sometimes when the page is loaded. I have no idea why this is happening, AFAIK className is treated as just another prop in React. I am still new to React and Next.JS though, so I may be missing something basic here. Has anyone experienced something like this?