Переключатель режимов Node + React

У меня имеется переключатель, отвечающий за переключение режимов отображения - в одном состоянии выводится форма для записи данных в БД, а в другом - таблица для вывода этих данных на место формы. Когда проводится тестовое переключение на вывод таблицы, все работает исправно, однако при повторном выводе формы эта же форма становится невидимой, хотя все элементы на месте и их функционал сохраняется. Не могу понять, в какую сторону думать, чтобы решить проблемы с отображением формы. Код прилагаю. Form.js, где выводится форма записи и встроен описанный ранее переключатель:

import React, { useEffect, useState } from "react";
import TableFormSwitcher from "./TableFormSwitcher";
import DataTable from "./DataTable";

function Form() {
  const [displayTable, setDisplayTable] = useState(false);

  useEffect(() => {
    console.log(`Отображение таблицы: ${displayTable}`);
  }, [displayTable]);

  const handleToggleDisplay = () => {
    setDisplayTable(!displayTable); // Toggle between form and table
    // console.log(displayTable);
  };

  return (
    <div>
      <TableFormSwitcher handleToggleDisplay={handleToggleDisplay} displayForm={!displayTable} 
setDisplayTable={setDisplayTable} />
  {displayTable ? (
    <DataTable />
  ) : (
    <form className="contact__form" onSubmit={handleSubmit}>
      <div className="input__data">
        <input
          onBlur={title.onBlur}
          value={title.value}
          onChange={title.onChange}
          className="name__input input form__control element-animation"
          type="text"
          placeholder={t("post.title")}
          name="title"
          required
        />
        {title.isDirty && title.isEmpty && <div className="form__error">{t("error.empty")}</div>}
        {title.isDirty && title.minLengthError && (
          <div className="form__error">{t("error.length")}</div>
        )}
      </div>

      <div className="input__data">
        <input
          onBlur={link.onBlur}
          value={link.value}
          onChange={link.onChange}
          className="link__input input form__control element-animation"
          type="text"
          placeholder={t("post.link")}
          name="link"
          required
        />
        {link.isDirty && link.isEmpty && <div className="form__error">{t("error.empty")}</div>}
        {link.isDirty && link.minLengthError && (
          <div className="form__error">{t("error.length")}</div>
        )}
      </div>

      <DragDropFile onFileChange={handleFileChange} />

      <div className="input__data">
        <textarea
          onBlur={text.onBlur}
          value={text.value}
          onChange={text.onChange}
          className="form__textarea form__control element-animation"
          name="text"
          id=""
          cols="30"
          rows="10"
          placeholder={t("post.text")}
        ></textarea>
        {text.isDirty && text.isEmpty && <div className="form__error">{t("error.empty")}</div>}
        {text.isDirty && text.minLengthError && (
          <div className="form__error">{t("error.length")}</div>
        )}
      </div>

      <div className="input__data">
        <button
          type="submit"
          className="form__btn form__control element-animation"
        >
          {t("post.button")}
        </button>
      </div>
    </form>
  )}
</div>
  );
}

export default Form;

Код переключателя под названием TableFormSwitcher.js:

import React, { useState } from "react";

function TableFormSwitcher({ handleToggleDisplay, displayForm }) {
  const [isChecked, setIsChecked] = useState(displayForm);

  const toggleSwitch = () => {
    setIsChecked(!isChecked);
    if (typeof handleToggleDisplay === 'function') {
      handleToggleDisplay(); // Call handleToggleDisplay if it's a function
    }
  };

  return (
    <label className="switch">
      <input type="checkbox" checked={isChecked} onChange={toggleSwitch} />
      <span className="slider round"></span>
    </label>
  );
}

export default TableFormSwitcher;

Компонент DataTable.js для вывода таблицы с данными из БД:

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

function DataTable() {
   const [data, setData] = useState([]);

   useEffect(() => {
     fetchData();
   }, []);

   const fetchData = async () => {
      try {
        const response = await axios.get('/api/getDataFromDatabase');
        setData(response.data);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
   };

   return (
      <div>
         <h2>Data Table</h2>
         <table>
           <thead>
             <tr>
               <th>Title</th>
               <th>Link</th>
               <th>Photo</th>
               <th>Description</th>
             </tr>
           </thead>
          <tbody>
              {data.map((item, index) => (
                 <tr key={index}>
                   <td>{item.Header}</td>
                   <td>{item.link}</td>
                   <td><img src={item.photo} alt="Photo" style={{ width: '100px', height: 'auto' }} /></td>
                   <td>{item.description}</td>
                 </tr>
               ))}
           </tbody>
        </table>
   </div>
    );
  }

  export default DataTable;