TypeError: react__WEBPACK_IMPORTED_MODULE_0___default(...) is not a function

[korczivo]

What do you think about this implementation? Any suggestions on how to fix this error?
I don't have ideas on how to do it in this case.

`
import React, { useReducer } from 'react';
import { useRouter } from 'next/router';
import { DateRangeInput } from '@datepicker-react/styled';
import {
useFormik,
} from 'formik';

const initialState = {
startDate: null,
endDate: null,
focusedInput: null,
};
const reducer = (state, action) => {
switch (action.type) {
case 'focusChange':
return {
...state,
focusedInput: action.payload,
};
case 'dateChange':
return action.payload;
default:
throw new Error();
}
};
export const Filters = () => {
const [
state,
dispatch,
] = useReducer(reducer, initialState);
const router = useRouter();
const queryString = router.query;
const formik = useFormik({
initialValues: {
breakfast: '',
capacity: '',
pets: '',
type: '',
},
});

Object.assign(formik.initialValues, queryString);

return (
<>

<DateRangeInput
onDatesChange={data => dispatch({
type: 'dateChange',
payload: data,
})}
onFocusChange={focusedInput => dispatch({
type: 'focusChange',
payload: focusedInput,
})}
startDate={state.startDate} // Date or null
endDate={state.endDate} // Date or null
focusedInput={state.focusedInput} // START_DATE, END_DATE or null
/>

Guests
1 2 3 4

Breakfast

Pets

<button
type="submit"
className="btn__blue"
onClick={() => formik.handleSubmit}
>
Submit


</>
);
};
`

[korczivo]

I also used that
https://nextjs.org/docs/advanced-features/dynamic-import
because that is next error I think, but it doesn't working too.