Uncheck a checkbox if another checkbox is unchecked

Hi I'm using Formik for my forms. I have two checkboxes in this React component which I need to write some logic that when I uncheck the cookies page checkbox the other one unchecks and the UI shows this. In the onFormSubmit function I can get the dynamic checkbox values. Can someone advise me please?

My code:

import React, { useState, useEffect, useRef } from 'react';

const ExampleForm = () => {
  const [initialValues, setInitialValues] = useState();

  const { getPreferences, putPreferences } = useFormApi();

  const formRef = useRef();

  const getInitialValues = async () => {
    const res = await getPreferences(formId);
    if (res && !(await checkErrors(res))) {
      const {
        includeTermsPage,
        includesCookiesPage
      } = res;

      const values = {
        includeTermsPage: includeTermsPage || '',
        includeCookiesPage: includeCookiesPage || ''
      };
      return values;
    }
    return null;
  };

  useEffect(() => {
    let isMounted = true;
    const getData = async () => {
      if (isMounted) {
        const data = await getInitialValues();
        if (data) return data;
        return null;
      }
      return null;
    };
    getData().then((v) => isMounted && setInitialValues(v));
    return () => {
      isMounted = false;
    };
  }, []);


  const onFormSubmit = async (values) => {
    const {
      includeTermsPage,
      includeCookiesPage
    } = values;

      console.log(includeTermsPage) // shows true in the console for being checked

      const body = {
        includeTermsPage,
        includeCookiesPage,
      };

      putPreferences({ id: formId, body });
    
  };


  return initialValues ? (
    <Form
      initialValues={initialValues}
      formRef={formRef}
      onSubmit={onFormSubmit}
    >
      <AutoSave onSubmit={onFormSubmit} />
      <HeadingSection>
        <Heading>Example Form</Heading>
      </HeadingSection>

      <Container>
          <Col removeBorderMobLeft borderLeft>
            <CheckBox>
              <PropertyPalCheckBox
                inlineBlock
                verticalAlign
                name="includeCookiesPage"
                id="includeCookiesPage"
              />
            </CheckBox>
            <Content>
              <ContentText>Cookies Pages</ContentText>
            </Content>
          </Col>
        </FlexRow>
        <FlexRow borderLeft borderRight borderBottom borderBottomMob>
          <Col borderMobBottom>
            <CheckBox>
              <CheckBox
                inlineBlock
                verticalAlign
                name="includeTermsPage"
                id="includeTermsPage"
              />
            </CheckBox>
            <Content>
              <ContentText>Terms Page</ContentText>
            </Content>
          </Col>
        </FlexRow>
       
      </Container>
    </Form>
  ) : null;
};

export default ExampleForm;