Show/Hide Input field on checkbox onchange

I have an issue, I need to show and hide Input/Text field based on Checkbox's state. Means when checkbox state is checked I need to show TextField and when I uncheck it should hide. I have attached a code of this component below. As you can see I have TextFields created already, but I need to hide/show them. When I check/uncheck checkbox2 show/hide TextField2. Thank you for any tip or advice!

import React, { useState } 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";

//let checkboxChecked = showDropDown;

const FormDetails = ({ dynamicForm }: { dynamicForm: DynamicForm }) => {
  return (
    <div>
      <h4 style=>asd</h4>
      <Grid>
        <GridRow>
          <GridCell span={4}>
            <TextField
              maxLength={512}
              textarea
              label="TextField1"
              onChange={(value) => (dynamicForm.description.kk = value)}
              defaultValue={dynamicForm.description?.ru}
            />
          </GridCell>
          <GridCell span={4}>
            <TextField
              maxLength={512}
              textarea
              label="TextField2"
              onChange={(value) => (dynamicForm.description.en = value)}
              defaultValue={dynamicForm.description?.en}
            />
          </GridCell>
        </GridRow>
          <GridCell span={4}>
            <Checkbox
              label="Checkbox1"
              onChange={(value) => (dynamicForm.needApprove = value)}
              defaultChecked={dynamicForm.needApprove}
            />
          </GridCell>
          <GridCell span={5}>
            <Checkbox
              label="Checkbox2" //
              onChange={(value) => (dynamicForm.needExtraApprove = value)}
              defaultChecked={dynamicForm.needExtraApprove}
            />
          </GridCell>
        </GridRow>
      </Grid>
    </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: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (step < screen.third) {
      setStep((prev) => prev + 1);
    } else {
      console.log("submit!");
      //submit
    }
  };

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

  return (
    <form onSubmit={onNextButtonPress} noValidate={step === screen.third}>
      <LinearProgress progress={progress} determinate />
      {content}
      <div className="request-btn-container">
        <Button label="Previous step" onClick={onBackButtonPress} />
        <Button label="Next step" type="submit" />
      </div>
    </form>
  );
};

Will appreciate any tip or advice.