Reactstrap Modal Not Opening?

Question

Hi All I have been trying to integrate 4 modals in an single component . while 3 modals are working fine 4th modal is not working and only 3 of the modal is showing and working properly. here is the code for the common component

import React, { useEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { Button, Container, Table } from 'react-bootstrap';
 import { MdOutlineAdjust } from 'react-icons/md';
 import parse from 'html-react-parser';
 import { getValueWithApiKey } from '../../utilities/utils';
 import { IconContext } from 'react-icons';
 import DetailedView from '../detailview/detailedview';
 import { openModal, closeModal } from '../../services/detailmodal';
 import { openupdateModal, closeupdateModal } from '../../services/updateform';
 import { openPrizeModal, closePrizeModal } from '../../services/detailapimodal';
 import DetailApiView from '../detailview/detailapiview';
 import { getPrizes } from '../../services/prize';
 import DetailDataView from '../detailview/detailedDataView';
 import { getTeamDetails } from "../../services/team";

 function TableView({ data, displayedColumns, fieldActions, UpdateForm, toggleStatus, dataColumns }) {
  const dispatch = useDispatch();
  const [cellValue,setCellValue] = useState({});
  const detailModalOpen = useSelector((store) => store.detailmodal.detailModalOpen);
  const { updateFormOpen } = useSelector((store) => store.updateformmodal);
  const [prizeModalOpen,setPrizeModalOpen] = useState(false);
  const { prizes, loading } = useSelector((state) => state.prizereducer);
  const [teamdetailsModal,setteamdetailsModal] = useState(false);
  const { teamdetail } = useSelector((store) => store.team);

  useEffect(() => {
    setCellValue(data);
  }, [data]);

  const openDetailModal = (item) => {
    dispatch(openModal());
    setCellValue(item);
  };

  const closeDetailModal = () => {
    dispatch(closeModal());
  };

  const closeUpdateForm = () => {
    dispatch(closeupdateModal());
  };

  const openUpdateForm = (item) => {
    dispatch(openupdateModal());
    setCellValue(item);
  };

  const activateStatus = (item) => {
    let status = 'active';
    let { id } = item;
    let company = { status, id };
    dispatch(toggleStatus(company));
  };

  const openPrizeView = async (item) => {
    //dispatch(openPrizeModal());
    setCellValue(item);
    let filter = `{"where":{"and":[{"tournamentid":${item.id}}]}}`;
    await dispatch(getPrizes(filter));
    setPrizeModalOpen(true);
  };

  const closePrizeView = () => {
    setPrizeModalOpen(false);
  };

  const openTeamDetailsModal = async (item) => {
    setCellValue(item);
    setteamdetailsModal(true);
    console.time('team api');
    await dispatch(getTeamDetails({ id: item.id }));
    console.timeEnd('team api');
    console.log(teamdetail);
    
  };

  const closeTeamDetailsModal = () => {
    setteamdetailsModal(false);
  };

  const deactivateStatus = (item) => {
    let status = 'inactive';
    let { id } = item;
    let company = { status, id };
    dispatch(toggleStatus(company));
  };

  const args = {
    autohide: true,
    flip: true,
  };

  const getTableActions = (item, columnValue) => {
    let { status } = item;
    switch (columnValue['type']) {
      case 'edit':
        return (
          <div>
            <Button color='primary' onClick={() => openUpdateForm(item)}>
              Edit
            </Button>
          </div>
        );
      case 'status':
        if (status === 'active') {
          return (
            <div>
              <Button variant='danger' onClick={() => deactivateStatus(item)}>
                Deactivate
              </Button>
            </div>
          );
        }
        return (
          <div>
            <Button variant='success' onClick={() => activateStatus(item)}>
              Activate
            </Button>
          </div>
        );
      case 'viewdata':
        return (
          <div>
            <Button color='dark' onClick={() => openPrizeView(item)}>
              View Prizes
            </Button>
          </div>
        );
      case 'viewdetails':
        return (
          <div>
            <Button color='dark' onClick={() => openTeamDetailsModal(item)}>
              View Detail
            </Button>
          </div>
        );
      default:
        return (
          <div>
            <Button color='dark' onClick={() => openDetailModal(item)}>
              View
            </Button>
          </div>
        );
    }
  };

  const getCellValue = (item, columnValue) => {
    const value = item[columnValue['value']];

    switch (columnValue['type']) {
      case 'enum_icon':
        return (
          <div>
            <IconContext.Provider value={{ color: value === 'active' ? 'green' : 'red', className: 'react-status-icon' }}>
              <MdOutlineAdjust />
            </IconContext.Provider>
          </div>
        );
      case 'image':
        return <img src={value} alt='' height={45} width={55} />;
      case 'content':
        return (
          <Container>
            <div className='text-truncate'>{parse(value)}</div>
          </Container>
        );
      default:
        return getValueWithApiKey(item, columnValue);
    }
  };

  return (
    <div className='admin-table'>
      <Table bordered>
        <thead>
          <tr>
            {displayedColumns.map((column) => (
              <th key={`${column['header']}-${column['value']}`}>{column['header'].toUpperCase()}</th>
            ))}
            {fieldActions && <th colSpan={3}>Actions</th>}
          </tr>
        </thead>
        <tbody>
          {data &&
            data.map((item, index) => (
              <tr key={index}>
                {displayedColumns.map((columnName) => (
                  <td key={columnName['value']}>{getCellValue(item, columnName)}</td>
                ))}
                {fieldActions &&
                  fieldActions.map((column, i) => (
                    <td key={i}>{getTableActions(item, column)}</td>
                  ))}
              </tr>
            ))}
        </tbody>
      </Table>
      /*DetailDataView */
      {teamdetailsModal && <DetailDataView data={teamdetail} modalState={teamdetailsModal} closeModal={closeTeamDetailsModal} />} 
      {detailModalOpen && <DetailedView data={cellValue} fields={displayedColumns} handleClose={closeDetailModal} />}
      {updateFormOpen && UpdateForm && <UpdateForm data={cellValue} />}
      {prizeModalOpen && prizes && <DetailApiView data={prizes} modalState={prizeModalOpen} closeModal={closePrizeView} />}
         
    </div>
  );
}

export default TableView;

Here is the code for the for the DetailedDataView

import { useEffect } from "react";
//import { useDispatch } from "react-redux";
import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';

function DetailDataView({ data, modalState, closeModal }) {




 console.log(data);
    const itemData = Array.isArray(data) ? data[0] : data;

    const closemodal = () => {
        dispatch(closeModal());
    };

    useEffect(() => {
        if (modalState && data.length === 0) {
            // Load the team details data when the modal is opened and there's no data
            // dispatch(getTeamDetails()); // Uncomment this line if you need to fetch data
        }
    }, [modalState, data]);

    return (
        <Modal isOpen={modalState} toggle={closeModal}>
            <ModalHeader toggle={closeModal}>Team details</ModalHeader>
            <ModalBody>
                {/* Render your team details here */}
                {/* For example, you can display the team details using a Table or any other component */}
                {itemData && (
                    <div>
                        <p>Team Name: {itemData}</p>
                        
                        {/* Add more fields as necessary */}
                    </div>
                )}
            </ModalBody>
            <ModalFooter>
                <Button color="secondary" onClick={closemodal}>Close</Button>
            </ModalFooter>
        </Modal>
    );
}

export default DetailDataView;
`

Here is the code for the reducer

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";

let initialState = {
    teams: [],
    page: 0,
    count: 0,
    loading: false,
    success: false,
    error: '',
    teamdetail: {}
};

const API_BASE_URL = 'http://localhost:4000';





   export const getTeamDetails = createAsyncThunk('/team/details', async (teamData, { rejectWithValue }) => {
        try {
            let { id } = teamData;
            let result = await axios.get(`${API_BASE_URL}/website/teamlead/${id}`);
            return result.data;
        } catch (err) {
            return rejectWithValue(err.response.data);
        }
    });
 




  export const toggleStatus=createAsyncThunk('team/status',(async(teamData,{rejectWithValue})=>{
        try
        {
            let {id,status}=teamData;
            const result=await axios.put(`${API_BASE_URL}/website/teamlead/togglestatus/${id}`,{status:status});
            return result.data;
        }
        catch(err)
        {
    
            return rejectWithValue(err.response.data);
        }
    }));
    export const getTeams = createAsyncThunk('/teams/get', async (teamData, { rejectWithValue }) => {
        try {
            let { offset, limit } = teamData;
            let result = await axios.get(`${API_BASE_URL}/website/teamlead/cms?offset=${offset}&limit=${limit}`);
            return result.data;
        } catch (err) {
            return rejectWithValue(err.response.data);
        }
    });
    const teamSlice = createSlice({
        name: 'teams',
        initialState,
        reducers: {},
        extraReducers: (builder) => {
            builder
                .addCase(getTeams.pending, (state) => {
                    state.loading = true;
                    state.error = '';
                    state.success = false;
                })
                .addCase(getTeams.rejected, (state, action) => {
                    state.loading = false;
                    state.error = action.payload?.msg || 'Failed to fetch teams';
                    state.success = false;
                })
                .addCase(getTeams.fulfilled, (state, action) => {
                    state.loading = false;
                    state.error = '';
                    state.success = true;
                    state.teams = action.payload.teams;
                });
            builder
                .addCase(getTeamDetails.pending, (state) => {
                    state.loading = true;
                    state.error = '';
                    state.success = false;
                })
                .addCase(getTeamDetails.rejected, (state, action) => {
                    state.loading = false;
                    state.error = action.payload?.msg || 'Failed to fetch team details';
                    state.success = false;
                })
                .addCase(getTeamDetails.fulfilled, (state, action) => {
                    state.loading = false;
                    state.error = '';
                    state.success = true;
                    state.teamdetail = action.payload.data;
                });
                builder.addCase(toggleStatus.rejected,(state,action)=>{
                    console.log(action);
                    state.loading=false;
                    state.error=action.payload;
                }).addCase(toggleStatus.pending,(state)=>{
                    state.loading=true;
                    state.success=false
                }).addCase(toggleStatus.fulfilled,(state,action)=>{
                    state.loading=false;
                    state.success=true;
                    let {id,status}=action.meta.arg;
                    let newteams=state.teams.filter(team=>{
                        return team.id==id
                    });
                    newteams[0].status=status;
                    let newTeams=state.teams.filter(team=>{
                        return team.id!=id
                    });
                    newTeams.unshift(newteams[0]);
                    state.teams=newTeams;
                });
        }
    });
    
    export default teamSlice.reducer;

Some thing which i have observed :- 1.) teamdetails is not assigned on first call . 2.) Page is getting re-renderd on call

Can someone tell me what can be the mistake ? or it is an issue with library i.e. reactstrap ?