🐛 Fix router wrapper around error boundary

Not sure why exactly this is or isn't working properly with
the built in decorator, but I suspect it has something to
do with the error boundary of react router itself/the
decorator and the error state not being reset properly
when the story remounts.

The workaround just creates a new memory router instance
on every render of the story, discarding any router state
between every story render which seems to solve the
problem.

src/components/Errors/ErrorBoundary.stories.jsx

@@ -1,25 +1,27 @@
 import React from 'react';
-import {withRouter} from 'storybook-addon-remix-react-router';
+import {MemoryRouter} from 'react-router';
 
 import {PermissionDenied, ServiceUnavailable, UnprocessableEntity} from 'errors';
 
 import ErrorBoundary from './ErrorBoundary';
 
+const Nested = ({error}) => {
+  throw error;
+};
+
 const render = ({useCard, errorType, errorCode}) => {
   const error = new errorType('some error', 500, 'some error', errorCode);
-
   return (
     <ErrorBoundary useCard={useCard}>
-      {React.createElement(() => {
-        throw error;
-      })}
+      <Nested error={error} />
     </ErrorBoundary>
   );
 };
 
 export default {
   title: 'Private API / ErrorBoundary',
   component: ErrorBoundary,
+  render,
   argTypes: {
     useCard: {control: {type: 'boolean'}},
     errorType: {
@@ -32,7 +34,6 @@ export default {
 };
 
 export const GenericError = {
-  render,
   args: {
     useCard: true,
     errorType: Error,
@@ -41,16 +42,20 @@ export const GenericError = {
 };
 
 export const PermissionDeniedError = {
-  render,
-  decorators: [withRouter],
+  decorators: [
+    Story => (
+      <MemoryRouter initialEntries={['/']}>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
   args: {
     useCard: true,
     errorType: PermissionDenied,
   },
 };
 
 export const UnprocessableEntityErrorInactive = {
-  render,
   args: {
     useCard: true,
     errorType: UnprocessableEntity,
@@ -59,7 +64,6 @@ export const UnprocessableEntityErrorInactive = {
 };
 
 export const UnprocessableEntityErrorGeneric = {
-  render,
   args: {
     useCard: true,
     errorType: UnprocessableEntity,
@@ -68,7 +72,6 @@ export const UnprocessableEntityErrorGeneric = {
 };
 
 export const ServiceUnavailableErrorMaintenance = {
-  render,
   args: {
     useCard: true,
     errorType: ServiceUnavailable,
@@ -77,7 +80,6 @@ export const ServiceUnavailableErrorMaintenance = {
 };
 
 export const ServiceUnavailableErrorMaxSubmissions = {
-  render,
   args: {
     useCard: true,
     errorType: ServiceUnavailable,
@@ -86,7 +88,6 @@ export const ServiceUnavailableErrorMaxSubmissions = {
 };
 
 export const ServiceUnavailableError = {
-  render,
   args: {
     useCard: true,
     errorType: ServiceUnavailable,
@@ -95,7 +96,6 @@ export const ServiceUnavailableError = {
 };
 
 export const ServiceUnavailableErrorGeneric = {
-  render,
   args: {
     useCard: true,
     errorType: ServiceUnavailable,