Hide and Show dropDown on checkbox check/uncheck

I have an issue, I need to show and hide DropDown/Selects field based on Checkbox's state. Means when checkbox state is checked I need to show Dropdown and when I uncheck it should hide. I have attached a code of this component below. As you can see I have 3 Dropdowns created already, but I need to hide/show them by checking/unchecking one single checkbox

import React, { useState, useEffect } from "react";
import { Button } from "../../components/Button";
import { Checkbox } from "../../components/Checkbox";
import { FormBuilder } from "../../components/FormBuilder";
import { Grid, GridCell, GridRow } from "../../components/Grid";
import { LinearProgress } from "../../components/LinearProgress";
import { Select } from "../../components/Select";
import { TextField } from "../../components/TextField";
import { Name } from "../../models/Name";
import { Option } from "../../models/Option";
import { DynamicForm } from "../../models/DynamicForm";
import "./index.css";
import { Organization } from "../../models/Organization";
import { request } from "../../api";
import { serialize } from "class-transformer";
import { CodingTemplate } from "../../models/CodingTemplate";
import { useHistory } from "react-router-dom";
import { useRef } from "react";

const NUMBER_OF_STEPS = 3;
const screen = {
  first: 1,
  second: 2,
  third: 3,
};

const FormDetails = ({ dynamicForm }: { dynamicForm: DynamicForm }) => {
  const check1 = useRef();

  return (
    <div>
      <h4 style=>Данные формы</h4>
      <Grid>
        
        <GridRow>
          <GridCell span={5}>
            <Checkbox
              label="CHECKBOX"
              onChange={(value) => (dynamicForm.needExtraApprove = value)}
              defaultChecked={dynamicForm.needExtraApprove}
            />
          </GridCell>
        </GridRow>
        <GridRow>
          <GridCell span={4}>             
              <Select<Option>
                required
                //defaultValue={dynamicForm.departmentHash}
                label="Select to show/hide"
                type={Option}
                //api="/state_schedule/departments-with-journals/"
                defaultOptions={defaultOptions}
                //onChange={(value: Option) => dynamicForm.departmentHash = value}
              />
            }
          </GridCell>
          <GridCell span={4}>
            <Select<Option>
              required
              //defaultValue={dynamicForm.departmentHash}
              label="Select to show/hide"
              type={Option}
              //api="/state_schedule/departments-with-journals/"
              defaultOptions={defaultOptions}
              //onChange={(value: Option) => dynamicForm.departmentHash = value}
            />
          </GridCell>
          <GridCell span={4}>
            <Select<Option>
              required
              //defaultValue={dynamicForm.departmentHash}
              label="Select to show/hide"
              type={Option}
              //api="/state_schedule/departments-with-journals/"
              defaultOptions={defaultOptions}
              //onChange={(value: Option) => dynamicForm.departmentHash = value}
            />
          </GridCell>
        </GridRow>
      </Grid>
    </div>
  );
};

const FormFields = ({ dynamicForm }: { dynamicForm: DynamicForm }) => (
  <div>
    <h4 style=>ASD</h4>
    <FormBuilder dynamicForm={dynamicForm} />
  </div>
);

export default () => {
  const [step, setStep] = useState(1);
  const [dynamicForm, setDynamicForm] = useState<DynamicForm>(
    new DynamicForm()
  );
  let progress = parseFloat(((step - 1) * (1 / NUMBER_OF_STEPS)).toFixed(2));
  const onBackButtonPress = () => {
    if (step > 0) {
      setStep((prev) => prev - 1);
    }
  };

  const onNextButtonPress = () => {
    event.preventDefault();

    if (step < screen.third) {
      setStep((prev) => prev + 1);
    } else {
      console.log("submit!");
      //submit
    }
    // if (step < screen.third) {
    //   setStep((prev) => prev + 1);
    // } else {
    //   console.log("submit!");
    //   //submit
    // }
  };

  const history = useHistory();
  const onSubmitTest = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    try {
      console.log(dynamicForm);
      await request("/service-desk/forms/", {
        method: "POST",
        body: serialize(dynamicForm),
      });

      history.push({
        pathname: "/service-desk/application-form",
      });
    } catch (error) {
      console.log(error);
      alert("ERROR");
    }
  };

  let content = <SubDivision dynamicForm={dynamicForm} />;
  let nextBtnLabel = "NEXT";
  if (step === screen.second) {
    content = <FormDetails dynamicForm={dynamicForm} />;
  } else if (step === screen.third) {
    content = <FormFields dynamicForm={dynamicForm} />;
  }

  return (
    <form onSubmit={onSubmitTest} noValidate={step === screen.third}>
      <LinearProgress progress={progress} determinate />
      {content}
      <div className="request-btn-container">
        <Button
          label="BACK"
          disabled={step == 1}
          onClick={onBackButtonPress}
        />
        {step === 3 ? (
          <Button label="SAVE" raised type="submit" />
        ) : (
          <Button
            label="NEXT"
            disabled={step == 3}
            onClick={onNextButtonPress}
          />
        )}
      </div>
    </form>
  );
};

. Thank you for any tip or advice!