Getting warning when i use withCookies() - reactjs

Question

I am using react-cookie in my project. When i use withCookies() i am getting warning in console log like this
Warning: Failed prop type: Invalid prop component of type object
supplied to Route, expected function
How can i solve this.?
Below is the code
import React from 'react';
import { Form, Icon, Input, Button, Checkbox } from 'antd';
import { withCookies } from "react-cookie";
import './Login.css';
class NormalLoginForm extends React.Component {
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log(values);
const { cookies } = this.props;
cookies.set('token', 'dfsfsd54dg2g45fg575f432sd4');
}
});
}
render() {
const { getFieldDecorator } = this.props.form;
return (
<div style={{ textAlign: 'center' }}>
<img className="logo-white" src={'https://cdn.medcampus.io/wp-content/uploads/2018/08/01131559/MC_Logo_Black.png'} alt="logo"/>
<div className="login-container">
<br/>
<Form onSubmit={this.handleSubmit} className="login-form">
<Form.Item>
{getFieldDecorator('email', {
rules: [{ required: true, message: 'Please input your Email id!' }, {
type: 'email', message: 'The input is not valid E-mail!',
}],
})(
<Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Email" size={"large"} />
)}
</Form.Item>
<Form.Item>
{getFieldDecorator('password', {
rules: [{ required: true, message: 'Please input your Password!' }],
})(
<Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" size={"large"} placeholder="Password" />
)}
</Form.Item>
<Form.Item>
{getFieldDecorator('remember', {
valuePropName: 'checked',
initialValue: true,
})(
<Checkbox>Remember me</Checkbox>
)}
<a className="login-form-forgot" href="">Forgot password</a>
<Button type="primary" size={"large"} htmlType="submit" className="login-form-button">Log in</Button>
</Form.Item>
</Form>
</div>
</div>
);
}
}
const Login = withCookies(Form.create({ name: 'normal_login' })(NormalLoginForm));
export { Login };

Answer 1

Following the comments, you are exporting all imports from your containers' files as default, so basically you'll get an object, not a function(the exact export).
To prevent this, there is several ways to do it:
Import your container in App from its own file.
in index.js of pages, you can do this :
import { Login } from `LoginContainerFile`;
import { Comp1} from `Comp1ContainerFile`;
import { Comp2} from `Comp2ContainerFile`;
export { Login, Comp1, Comp2 };
Good luck and hope it resolves your problem.