How to make React Leaflet Marker popup in right side always?

I want to show a React Leaflet Marker popup on the right side of the map screen, but it always sticks to the left side of the screen. Therefore, I would appreciate any help in getting this done. Below is a screenshot of the current state of the popup.

this is my CSS that i tried.

.leaflet-popup {
  transform: none !important;
  position: absolute !important;
  top: 1px !important;
  bottom: 0px !important;
  right: 0% !important;
  display: flex !important;
  align-items: right !important;
  justify-items: right !important;
}

.leaflet-container .leaflet-popup-content-wrapper .popup_modle {
  z-index: 1000;
  position: absolute;
  right: 0 !important;
  height: 400px;
  width: 300px;
  top: -1px;
  background-color: rgba(5, 5, 5, 0.7) !important;
  background: linear-gradient(
    60deg,
    rgba(134, 134, 134, 0.7) 0%,
    rgba(0, 0, 0, 0.7) 59%
  ) !important;
  align-items: right !important;
  justify-items: right !important;
  justify-content: right !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
}

Thanks

On top that that marker I have added a model to show data.

and the model goes top of the map like this so you can write your own popup.

const [open, setOpen] = React.useState(false);
const [data, setData] = React.useState();

 const handleClose = () => {
    setOpen(false);
  };

  const handleOpen = (datas) => {
    setOpen(true);
    setData(datas);
  };

<div className="map_data w-full">
      <Modal
        open={open}
        onClose={handleClose}
        className="modal_container"
        BackdropProps={{
          timeout: 0,
          invisible: true,
        }}
      >
        <div className="popup_modle pl-3 ">
          <button
            onClick={handleClose}
            className="text-md absolute  right-3   text-lightDarkGreen  font-bold top-3"
            id="myModal"
          >
            X <button />
          </button>
          <div className="relative top-10">
            <div className="pb-4 ">
              <p className="text-white text-sm opacity-80">Name</p>
              <p className="text-white font-bold text-4xl relative top-2">
                {date?.name}
              </p>
            </div>
            <div className="border-t border-deepDark relative pt-4 ">
              <p className="text-white text-2xl relative  opacity-80">
                Geographic index
              </p>
              <p className="text-white text-lg font-bold relative top-5 ">
                {date?.location?.country_name}, {"  "}
                {date?.location?.city}
              </p>
            </div>
          </div>
          <br />
        </div>
      </Modal>
      <Map
        ref={mapRefs}
        center={center}
        zoom={2}
        onPopupopen={centerMapView}
        maxZoom={19}
        position={center}
        bounceAtZoomLimits={true}
        maxBoundsViscosity={0.95}
        scrollWheelZoom={false}
        zoomAnimation={true}
        maxBounds={[
          [-180, -90],
          [180, 90],
        ]}
        zoomSnap={0.5}
        style={{ width: "100%", height: "400px" }} //zIndex: -10
      >
        <TileLayer
          url={`https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png?api_key=${process.env.REACT_APP_STADIA_API_KEY}`}
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
        {data.length > 0 && (
          <FeatureGroup ref={groupRef}>
            {data?.map((location, i) => (
              <>
 

                <Circle
                  center={[
                    parseFloat(location?.location?.lat_lon?.lat),

                    parseFloat(location?.location?.lat_lon?.lon),
                  ]}
                  fillOpacity={0.6}
                  color={"#32E8C3"}
                  fillColor={"#32E8C3"}
                  radius={355 * 2000}
                  eventHandlers={{ click: () => handleOpen(location) }}
                ></Circle>
              </>
            ))}
          </FeatureGroup>
        )}
      </Map>

and css

.popup_modle {
  position: absolute;
  right: 0 !important;
  top: 65px !important;
  height: 400px;
  width: 300px;
  background-color: rgba(5, 5, 5, 0.7) !important;
  background: linear-gradient(
    60deg,
    rgba(134, 134, 134, 0.7) 0%,
    rgba(0, 0, 0, 0.7) 59%
  ) !important;
}