Вызов функции внутри const с подпорками в реаги js

Question

У меня есть приборная панель, и у меня есть функция, это модальный тип, и он содержит форму. Когда форма будет заполнена, введенные данные появятся в таблице в нижней части панели инструментов.

В настоящее время данные в таблице загружаются вполне нормально, но всякий раз, когда я нажимаю на кнопку (которая вызывает форму , когда я набираю init, форма исчезает ... в основном форма исчезает при клике.

Вот мой код ниже ... спасибо

import React, {useState,useContext,useEffect} from 'react';
import TransactionItem from '../components/TransactionItem';
import TransactionService from '../Services/TransactionService';
import Message from '../components/Message';
import { AuthContext } from '../Context/AuthContext';
import { Line, Pie } from "react-chartjs-2";
import {
  Card,
  CardHeader,
  CardBody,
  CardFooter,
  CardTitle,
  Table,
  Row,
  Col,
  Button,
  FormGroup,
  Input,
  Modal
} from "reactstrap";


const Dashboard = props => {
  const [transaction,setTransaction] = useState({amount : "", date : "", token : "", meter : "", transactionid : ""});
    const [transactions,setTransactions] = useState([]);
    const [message,setMessage] = useState(null);
    const authContext = useContext(AuthContext);

    useEffect(()=>{
      TransactionService.getTransactions().then(data =>{
          setTransactions(data.transactions);
      });
  },[]);

 
  function Recharge() {
    
  const [transactionModal, setTransactionModal] = useState(false);

  const onSubmit = e =>{
    e.preventDefault();
    TransactionService.postTransaction(transaction).then(data =>{
        const { message } = data;
        resetForm();
        if(!message.msgError){
            TransactionService.getTransactions().then(getData =>{
                setTransactions(getData.transactions);
                setMessage(message);
            });
        }
        else if(message.msgBody === "UnAuthorized"){
            setMessage(message);
            authContext.setUser({username : "", role : ""});
            authContext.setIsAuthenticated(false);
        }
        else{
            setMessage(message);
        }
    });
}

const onChange = e =>{
  setTransaction({...transaction,[e.target.name] : e.target.value});
  
}

const resetForm = ()=>{
  setTransaction({amount : "", date : "", token : "", meter : "", transactionid : ""});
}


return (

  <>
  <Button
    className="btn-round"
    color="success"
    type="button"
    onClick={() => setTransactionModal(true)}
  >Recharge
  </Button>
  <Modal
    isOpen={transactionModal}
    toggle={() => setTransactionModal(false)}
    modalClassName="modal-register"
  >
    <div className="modal-header no-border-header text-center">
      <button
        aria-label="Close"
        className="close"
        data-dismiss="modal"
        type="button"
        onClick={() => setTransactionModal(false)}
      >
        <span aria-hidden={true}>×</span>
      </button>

      <h3 className="modal-title text-center">Enter Details</h3>
      <p></p>
    </div>
    <div className="modal-body">
      <form onSubmit={onSubmit}>
      <FormGroup>
        <label>Amount</label>
        <Input 
          defaultValue="" 
          placeholder="Enter date" 
          name="amount"
          value={transaction.amount}
          onChange={onChange} 
          type="text" />
      </FormGroup>
      <FormGroup>
        <label>Date</label>
        <Input 
          defaultValue="" 
          name="date"
          value={transaction.date}
          onChange={onChange} 
          placeholder="Enter date" 
          type="text" />
      </FormGroup>
      <FormGroup>
        <label>Token</label>
        <Input 
          defaultValue="" 
          name="token"
          value={transaction.token}
          onChange={onChange}
          placeholder="Enter token" 
          type="text" />
      </FormGroup>
      <FormGroup>
        <label>Meter</label>
        <Input 
          defaultValue=""
          name="meter" 
          value={transaction.meter} 
          onChange={onChange}
          className="form-control"
          placeholder="Enter meter" 
          type="text" />
      </FormGroup>
      <FormGroup>
        <label>ID</label>
        <Input 
          defaultValue="" 
          placeholder="Enter Id" 
          name="transactionid" 
          value={transaction.transactionid} 
          onChange={onChange}
          type="text" />
      </FormGroup>
      <Button block className="btn-round" color="default" type="submit">
        Continue
      </Button>
      </form>
    </div>
    <div className="modal-footer no-border-footer">
      <span className="text-muted text-center">
      {message ? <Message message={message}/> : null}
      </span>
    </div>
  </Modal>
</>

) 

  }

    





  
    return (
      <>
        <div className="content">
          <Row>
            <Col lg="3" md="6" sm="6">
              <Card className="card-stats">
                <CardBody>
                  <Row>
                    <Col md="4" xs="5">
                      <Recharge />
                    </Col>
                    <Col md="8" xs="7">
                      <div className="numbers">
                        <p className="card-category">Last Transaction</p>
                        <CardTitle tag="p">315 Units</CardTitle>
                        <p />
                      </div>
                    </Col>
                  </Row>
                </CardBody>
                <CardFooter>
                  <hr />
                  <div className="stats">
                    <i className="fas fa-people-carry " /> Get help
                  
                  </div>
                </CardFooter>
              </Card>
            </Col>
          <Row>
          <Col md="12">
              <Card className="card-plain">
                <CardHeader>
                  <CardTitle tag="h4">Transactions</CardTitle>
                  <p className="card-category">
                    A list of your previous transactions
                  </p>
                </CardHeader>
                <CardBody>
                  <Table responsive>
                    <thead className="text-primary">
                      <tr>
                        <th>Date</th>
                        <th>Amount</th>
                        <th>Token</th>
                        <th className="text-right">Action</th>
                      </tr>
                    </thead>
                    <tbody>
                      
            
                            {
                                transactions.map(transaction  =>{
                                    return  (<tr><TransactionItem key={transaction._id} transaction={transaction} />

                                             </tr>)
                                })
                            }
                        
                
                     
                    </tbody>
                  </Table>
                </CardBody>
              </Card>
            </Col>
          </Row>
      
        </div>
      </>
    );
  }

export default Dashboard;