I'm trying to open a popup window on click and looks like it caused re-render parent component. I tried to place open Modal widow in redux action (easy-peasy, but it does not help at all)

Component is ModalPopper, function that is trying to open the modal window goToEncounterDetailsPage

const NewPatientDetails = ({ type }) => {
  const [link] = useLink();
  const { view } = useStoreState((store) => store.patientDetails);

  const {
    patientDetails,
    insuranceDetails,
    visitDetails,
    latestCommentDetails,
    encounterDetailsView,
     clickedEncounter,
    encounterNotes,
  } = useStoreState((store) => store.dash4PatientDetails);
  const { id } = useParams();

  const {
    getPatientDetails,
    getVisitDetails,
    getInsuranceDetails,
    getLatestCommentDetails,
    getClickedEncounter,
    getClickedEncounterNotes,
    onGetViewConfig,
  } = useStoreActions((store) => store.dash4PatientDetails);

  const { sections, header } = view;

  const [isLoading, setLoading] = useState(false);
  const [chosen, setChosen] = useState("home");
  const [hasError, setError] = useState(false);
  // const [isOpen, setIsOpen] = useState(false);
  const [
    encounterModalPopperProps,
    showEncounterNote,
    closeEncounterNote,
  ] = useAlert();

  const initDetails = useCallback(async () => {
    setLoading((prevState) => prevState || !prevState); // set loading true

    await getData(id);
    try {
      setLoading((prevState) => (prevState ? !prevState : prevState)); // set loading false;
    } catch (error) {
      setError((prevState) => prevState || !prevState);
    }
  }, []);

  const getData = async (id) => {
    const res = await getVisitDetails(id);
    const patientId = res.data.patientId;
    await onGetViewConfig();
    const patientRes = await getPatientDetails(patientId);
  };

  const goToEncounterDetailsPage = async (patientVisitDetails) => {
    showEncounterNote();
     await getClickedEncounter(patientVisitDetails.visitId);
  };

  useEffect(() => {
    initDetails();
    return () => {
      setLoading((prevState) => prevState || !prevState);
    };
  }, []);

  const goToDashboard = () => link("/care-coordination")();

  return (
    <>
      <Suspense
        fallback={
          <div className="flex flex-row items-center justify-between w-full h-full mx-auto">
            <LoadingIndicator />
          </div>
        }
      >
        <div className="p-6 flex space-y-4 flex-col w-screen h-screen md:w-full md:h-full bg-newGray-150 overflow-auto">
          {isLoading ? (
            <div className="flex flex-row items-center justify-between w-full h-full mx-auto">
              <LoadingIndicator />
            </div>
          ) : hasError ? (
            <div className="">
            <span className="text-3xl text-gray-500 m-auto">
              Details page is currently unavailable
            </span>
            </div>
          ) : (
            <Suspense
              fallback={
                <div className="flex flex-row items-center justify-between w-full h-full mx-auto">
                  <LoadingIndicator />
                </div>
              }
            >
              <div className="flex flex-row space-x-4">
              <span className="text-newBlue-350 text-2xl flex flex-col justify-center cursor-pointer">
                <ArrowHeadLeft onClick={() => goToDashboard()} />
              </span>
                <span className="border border-gray-500"></span>
                <span className="text-newBlue-350 text-2xl flex flex-col justify-center">
                {patientDetails?.firstName} {patientDetails?.lastName}
              </span>
              </div>
              <ShowIf test={!isEmpty(header)}>
                <Header
                  headerDetails={header}
                  onChooseItem={setChosen}
                  chosen={chosen}
                  patientData={patientDetails}
                  insuranceData={insuranceDetails}
                />
              </ShowIf>
              <ShowIf test={!isEmpty(sections)}>
                {sections?.map((section, indexForSection) => {
                  const { title, rows, sectionId, isVisible } = section;
                  const isShown = evaluateToBoolean(isVisible, { chosen });
                  return (
                    <div
                      key={`${title}-${sectionId}-${indexForSection}`}
                      className={classNames(
                        "flex flex-col justify-start space-y-4",
                        {
                          hidden: !isShown,
                        }
                      )}
                    >
                      <SectionRow
                        onSelectItem={goToEncounterDetailsPage}
                        rows={rows}
                        patientData={patientDetails}
                        insuranceData={insuranceDetails}
                        visitData={visitDetails}
                        latestCommentData={latestCommentDetails}
                      />
                    </div>
                  );
                })}
              </ShowIf>
            </Suspense>
          )}

        </div>
      </Suspense>
      <Suspense fallback={<LoaderModal isOpen />}>
        <ShowIf test={encounterDetailsView?.view?.sections}>
          <ModalPopper open={encounterModalPopperProps.open} onClose={closeEncounterNote} >
            <EncounterNote
              insuranceDetails={insuranceDetails}
              clickedEncounter={clickedEncounter}
              encounterNotes={encounterNotes}
              id={id}
              setIsOpen={setIsOpen}
            />
          </ModalPopper>
        </ShowIf>
      
      </Suspense>
    </>
  );
};