eslint hoist never doesn't work in my react js app - reactjs

Question

I am having a painful moment because of some small issue in my react app.
import React, { useState } from 'react';
import { Box } from '#material-ui/core';
import { connect } from 'react-redux';
import { PropTypes } from 'prop-types';
import { HeadTwo, Text, StdLink } from '../../styled-components/Text';
import { ContainedBtn } from '../../styled-components/Button';
import { TextField } from '../../styled-components/Input';
import { FlexCenter, FlexStart, Form } from '../../styled-components/Layout';
import { login } from '../../redux/auth/actions';
const SignIn = ({ login, history }) => {
const [form, setForm] = useState({
email: '',
password: '',
});
const handleChange = e => {
setForm({
...form,
[e.target.name]: e.target.value,
});
};
const handleSubmit = e => {
e.preventDefault();
login(form, history);
};
return (
<FlexCenter>
<Form onSubmit={e => handleSubmit(e)} width="45rem" mt="20px" mb="20px">
<FlexStart mb={2} borderBottom={2} borderColor="common.dark">
<HeadTwo sz="2.6rem">Sign In</HeadTwo>
</FlexStart>
<TextField mb={2} hidelabel={form.email.length > 0 ? 'none' : null}>
<input
onChange={handleChange}
value={form.email}
type="email"
name="email"
placeholder="email"
id="email"
/>
</TextField>
<TextField mb={2} hidelabel={form.password.length > 0 ? 'none' : null}>
<input
onChange={handleChange}
value={form.password}
type="password"
placeholder="password"
name="password"
id="password"
/>
</TextField>
<Box mb={1}>
<ContainedBtn bg="#000" cr="#fff">
LOGIN
</ContainedBtn>
</Box>
<FlexCenter mb={1}>
<Text> Don't have an account? </Text>
<Box ml={1}>
<StdLink to="/register">register</StdLink>
</Box>
</FlexCenter>
<FlexCenter mb={1}>
<Text> Forget your password?</Text>
<Box ml={1}>
<StdLink>recover</StdLink>
</Box>
</FlexCenter>
</Form>
</FlexCenter>
);
};
SignIn.propTypes = {
login: PropTypes.func.isRequired,
history: PropTypes.object.isRequired,
};
export default connect(
null,
{ login }
)(SignIn);
so this is my signIn component and login function is yelling at me saying 'login is already declared in upper scope', which is quite weird because login prop comes from connect fn right?
anyway, So I tried changing eslint rule like this
{
"rules": {
"no-shadow": [
"error",
{ "builtinGlobals": false, "hoist": "never", "allow": [] }
]
}
}
since I set hoist to never, the warning should be gone, but it still remained.
does anyone know what I did wrong?
thanks !!

Answer 1

The login function that is imported will not work since you have parameter with the same name. You just need to rename:
const SignIn = ({ login: signin, history }) => {
// now the imported login will work
// to use login parameter, you now have signin