Скрыть и показать раскрывающийся список при установке / снятии флажка

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 = {{ margin: 16 }}>Данные формы</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 = {{ margin: 16 }}>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.info("submit!");
      //submit
    }
    // if (step < screen.third) {
    //   setStep((prev) => prev + 1);
    // } else {
    //   console.info("submit!");
    //   //submit
    // }
  };

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

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

      history.push({
        pathname: "/service-desk/application-form",
      });
    } catch (error) {
      console.info(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>
  );
};