error on unmounting reactjs component

[Shahzayb]

Here's my code:

import React from 'react';
import { makeStyles, Link } from '@material-ui/core';
import Colcade from 'colcade';
import { Link as RouterLink } from 'react-router-dom';
import CloudinaryImage from './CloudinaryImage';

const useStyles = makeStyles((theme) => ({
  grid: {
    display: 'flex',
    marginTop: theme.spacing(4),
  },
  grid_col: {
    flexGrow: 1,
    paddingLeft: theme.spacing(1),
    paddingRight: theme.spacing(1),
  },
  grid_item: {
    paddingBottom: theme.spacing(1),
  },
  grid_col_1: {},
  grid_col_2: { display: 'none' },
  grid_col_3: { display: 'none' },
  [theme.breakpoints.up('sm')]: {
    grid_col_2: { display: 'block' },
  },
  [theme.breakpoints.up('md')]: {
    grid_col_3: { display: 'block' },
  },
}));

function MasonryGrid({ photos }) {
  const classes = useStyles();
  React.useLayoutEffect(() => {
    const colc = new Colcade(`.${classes.grid}`, {
      columns: `.${classes.grid_col}`,
      items: `.${classes.grid_item}`,
    });

    return () => {
      colc.destroy();
    };
  }, [classes]);
  return (
    <div className={classes.grid}>
      <div className={`${classes.grid_col} ${classes.grid_col_1}`}></div>
      <div className={`${classes.grid_col} ${classes.grid_col_2}`}></div>
      <div className={`${classes.grid_col} ${classes.grid_col_3}`}></div>

      {photos.map((photo) => (
        <div key={photo._id} className={classes.grid_item}>
          <Link
            underline="none"
            color="inherit"
            component={RouterLink}
            to={`/p/${photo._id}`}
          >
            <CloudinaryImage
              publicId={photo.cloudinaryPublicId}
              alt={photo.tags.join(' ')}
            />
          </Link>
        </div>
      ))}
    </div>
  );
}

export default MasonryGrid;

When I unmount this component I get the error below.

Error:

react-dom.development.js:9602 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at removeChild (http://localhost:3000/static/js/0.chunk.js:103366:22)
    at unmountHostComponents (http://localhost:3000/static/js/0.chunk.js:116510:13)
    at commitDeletion (http://localhost:3000/static/js/0.chunk.js:116590:9)
    at commitMutationEffects (http://localhost:3000/static/js/0.chunk.js:119030:15)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/0.chunk.js:94057:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/0.chunk.js:94106:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/0.chunk.js:94159:35)
    at commitRootImpl (http://localhost:3000/static/js/0.chunk.js:118757:13)
    at unstable_runWithPriority (http://localhost:3000/static/js/0.chunk.js:147872:16)
    at runWithPriority$2 (http://localhost:3000/static/js/0.chunk.js:105951:14)
    at commitRoot (http://localhost:3000/static/js/0.chunk.js:118629:7)
    at finishSyncRender (http://localhost:3000/static/js/0.chunk.js:118024:7)
    at performSyncWorkOnRoot (http://localhost:3000/static/js/0.chunk.js:118004:13)
    at http://localhost:3000/static/js/0.chunk.js:106005:28
    at unstable_runWithPriority (http://localhost:3000/static/js/0.chunk.js:147872:16)
    at runWithPriority$2 (http://localhost:3000/static/js/0.chunk.js:105951:14)
    at flushSyncCallbackQueueImpl (http://localhost:3000/static/js/0.chunk.js:106000:11)
    at flushSyncCallbackQueue (http://localhost:3000/static/js/0.chunk.js:105988:7)
    at discreteUpdates$1 (http://localhost:3000/static/js/0.chunk.js:118121:11)
    at discreteUpdates (http://localhost:3000/static/js/0.chunk.js:95159:16)
    at dispatchDiscreteEvent (http://localhost:3000/static/js/0.chunk.js:99634:7)

[VladyslavGoloshchapov]

I have same error in same conditions

[VladyslavGoloshchapov]

I had to get rid of colcade solely because of this bug :(

[Thr44]

Seems I will have to do the same :(