How do i change the the like button to 1 like when a user is loged in?

My question is once the user is logged in I need to be able to set a like and remove it as well, such as instagram. I´ll leave you with my two components. Very much appreciated. What i was thinking was to share through props the handleclick and then pass it on the Onclick of the like button, but i had troubles with that.

function Login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleChangeEmail = (e) => {
    setEmail(e.target.value);
  };

  const handleChangePassword = (e) => {
    setPassword(e.target.value);
  };

  const handleClickLogin = () => {
    const storage = localStorage.getItem("values");

    if (
      JSON.parse(storage).email === email &&
      JSON.parse(storage).password === password
    ) {
      console.log("user loged");
    } else {
      console.log("user isn´t loged");
    }
  };

  return (
    <div className="container">
      <div className="icon">
        <div className="cion_class">
          <PersonAdd fontSize="large" />
        </div>
        <div className="text">Log In</div>
      </div>

      <div className="row m-2">
        <TextField
          id="email"
          className="p-2"
          onChange={handleChangeEmail}
          type="text"
          variant="outlined"
          label="Enter email"
          fullWith
        />
        <TextField
          id="password"
          className="p-2"
          onChange={handleChangePassword}
          type="text"
          variant="outlined"
          label="Enter Password"
          fullWith
        />
        <FormControlLabel
          control={
            <Checkbox
              icon={<CheckBoxOutlineBlank fontSize="small" />}
              checkedIcon={<CheckBox fontSize="small" />}
              name="checked"
            />
          }
          label="Remember me"
        />
        <Button
          variant="contained"
          color="primary"
          fullWidth
          onClick={() => handleClickLogin()}
        >
          Log In
        </Button>
      </div>
      <Divider variant="middle" />
      <Link to="sign-up">
        <h5 className="text-center">Create Account</h5>
      </Link>
    </div>
  );
}

export default Login;

function Like() {
  const [heartColor, setHeartColor] = useState(false);

  return (
    <>
      <button className="insta-heart">
        <i
          className={heartColor ? "fas fa-heart heart-red" : "far fa-heart"}
          onClick={() => {
            setHeartColor(!heartColor);
          }}
        ></i>
      </button>
    </>
  );
}

export default Like;