error boundary component catches error but disappears straight away

I have a component that is deliberately throwing an error, wrapped in an error boundary component.

It catches the error and displays the message but only for a split second.

This is my wrapped component

  useEffect(() => {   
        error(); 
    }, []);

    const error = () => {
        try {
            return [].replace(/'--'/, '')
        } catch (error) {
           throw(error)
            
        }
    }

and my error boundary component

class ErrorBoundary extends Component {
    constructor(props) {
      super(props);
      this.state = { hasError: false };
    }
  
    static getDerivedStateFromError(error) {
        console.log('derived', error)
      // Update state so the next render will show the fallback UI.
      return { hasError: true };
    }
  
    componentDidCatch(error, errorInfo) {
        console.log('error did catch', error)
      this.setState({ hasError: true})
    }
  
    render() {
      if (this.state.hasError) {
        return (
            <h1>Something went wrong.</h1>
        );
      }
  
      return this.props.children; 
    }
  }

Then i am declaring the components like so

<ErrorBoundary>
   <ProfileContainer />
</ErrorBoundary>

When my component loads it catches the error as it should and it's receiving it in the boundary component. It displays the error message but then immediately crashes

Am I handling this the wrong way? I know error boundaries are for DOM errors but its interesting that it is catching the error.

Any help greatly appreciated