Bagaimana cara menghubungkan sub-komponen ke komponen yang terhubung dengan redux?

Jika saya memiliki dua komponen, satu di mana variabel formData berada (komponen Login induk) dan yang lainnya berisi formulir itu sendiri, (diambil dari UI materi React), bagaimana saya dapat menghubungkan kedua komponen tersebut, jika saya perlu untuk sama sekali? Karena seperti yang ada sekarang, token jwt saya dibuat di backend Node, tetapi pengiriman sepertinya tidak ingin mengirimkan respon.data.

 import React, { Fragment, useState } from "react";
 import { connect } from "react-redux";

 import { login } from "../../actions/auth";
 import SignIn from "../../material/SignIn";

 const Login = ({ login, isAuthenticated }) => {
      const [formData, setFormData] = useState({
           email: "",
           password: ""
      });

      const { email, password } = formData;

      const onChange = e => {
           setFormData({ ...formData, [e.target.name]: e.target.value });
      };

      const onSubmit = e => {
           login(email, password);
      };

      // Redirect if logged in
      if (isAuthenticated) {
           return <Redirect to="/dashboard" />;
      }

      return (
           <Fragment>
                <SignIn
                     email={email}
                     password={password}
                     onSubmit={onSubmit}
                     onChange={onChange}
                     isAuthenticated={isAuthenticated}
                />
           </Fragment>
      );
 };

 const mapStateToProps = state => ({
      isAuthenticated: state.auth.isAuthenticated
 });

 export default connect(
      mapStateToProps,
      { setAlert, login }
 )(Login);

Dan komponen SignIn adalah:

 import React, { useState } from "react";
 import Avatar from "@material-ui/core/Avatar";
 import Button from "@material-ui/core/Button";
 import CssBaseline from "@material-ui/core/CssBaseline";
 import TextField from "@material-ui/core/TextField";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import Checkbox from "@material-ui/core/Checkbox";
 import Link from "@material-ui/core/Link";
 import Grid from "@material-ui/core/Grid";
 import Box from "@material-ui/core/Box";
 import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
 import Typography from "@material-ui/core/Typography";
 import { makeStyles } from "@material-ui/core/styles";
 import Container from "@material-ui/core/Container";

 function MadeWithLove() {
      return (
      <Typography variant="body2" color="textSecondary" align="center">
           {"Built with love by the "}
           <Link color="inherit" href="https://material-ui.com/">
                Material-UI
           </Link>
           {" team."}
      </Typography>
      );
 }

 const useStyles = makeStyles(theme => ({
      "@global": {
      body: {
           backgroundColor: theme.palette.common.white
      }
      },
      paper: {
           marginTop: theme.spacing(8),
           display: "flex",
           flexDirection: "column",
           alignItems: "center"
      },
      avatar: {
           margin: theme.spacing(1),
           backgroundColor: theme.palette.secondary.main
      },
      form: {
           width: "100%", // Fix IE 11 issue.
           marginTop: theme.spacing(1)
      },
      submit: {
           margin: theme.spacing(3, 0, 2)
      }
 }));

 export default function SignIn({ email, password, onChange, onSubmit }) {
      const classes = useStyles();

      return (
           <Container component="main" maxWidth="xs">
                <CssBaseline />
                <div className={classes.paper}>
                <Avatar className={classes.avatar}>
                     <LockOutlinedIcon />
                </Avatar>
                <Typography component="h1" variant="h5">
                     Sign in
                </Typography>
                <form onSubmit={e => onSubmit(e)} className={classes.form} noValidate>
                     <TextField
                          variant="outlined"
                          margin="normal"
                          required
                          onChange={e => onChange(e)}
                          fullWidth
                          id="email"
                          label="Email Address"
                          name="email"
                          value={email}
                          autoFocus
                     />
                     <TextField
                          variant="outlined"
                          margin="normal"
                          required
                          onChange={e => onChange(e)}
                          fullWidth
                          name="password"
                          label="Password"
                          type="password"
                          value={password}
                          id="password"
                          autoComplete="current-password"
                     />
                     <FormControlLabel
                          control={<Checkbox value="remember" color="primary" />}
                          label="Remember me"
                     />
                     <Button
                          type="submit"
                          fullWidth
                          variant="contained"
                          color="primary"
                          className={classes.submit}
                     >
                     Sign In
                     </Button>
                     <Grid container>
                          <Grid item xs>
                               <Link href="/id#" variant="body2">
                                    Forgot password?
                               </Link>
                          </Grid>
                               <Grid item>
                               <Link href="/id#" variant="body2">
                                    {"Don't have an account? Sign Up"}
                               </Link>
                          </Grid>
                     </Grid>
                </form>
                </div>
                <Box mt={5}>
                     <MadeWithLove />
                </Box>
           </Container>
      );
 }

Bagaimana saya bisa menghubungkan komponen SignIn ke komponen Login?