CustomCheckbox.js

import React, { useState } from "react";
import { Field } from "formik";
import styles from "./Style_CustomCheckbox";
import { useMediaQuery, mobileQuery } from "../../helpers/mediaQuery";
import whiteCheck from '../../assets/icons/whiteCheck.svg';

const CustomCheck = ({label, setAnswer}) => {

  const [checked, setChecked] = useState(false);
  let btn_class = checked ? styles.surveyCheckbox : {...styles.surveyCheckbox, backgroundColor: "transparent"};
  let isMobile = useMediaQuery(mobileQuery);

  return (
    <label style={{...styles.checkLabel, ...isMobile && styles.mobCheckLabel }}>
      <span style={{ ...btn_class, ...styles.span }}>
        <img
        style={styles.img}
        src={whiteCheck} alt=''/>
        <Field
          style={styles.defaultCheck}
          type="checkbox"
          name="survey"
          onClick={() => {
            setChecked(!checked);
            setAnswer ( {firstQ: label})
          }}
        />
      </span>
      <div style={{
        ...styles.checkDiv,
        ...isMobile && styles.checkDivMobile
      }}
      >
        {label}
      </div>
    </label>
  );
};

export default CustomCheck;