React DatePicker's popper stays underneath Leaflet MapContainer

Question

I'm trying to use React DatePicker in my project but DatePicker's popper stays underneath my leaflet map.

I'm also using React Select component and it works as expected so I'm guessing it is not a z-index issue. I couldn't understand what is causing the problem.

I've tried answers given to the similar problems but nothing worked for me.

I'll appreciate any help, thanks.

the datepicker

the select

<Flex direction="column" bg={"#242b2c"}>
            <Wrap align="stretch"
                justify="stretch"
                alignContent="stretch"
                spacing={0}
                w="full">
                <HStack borderRadius="sm"
                    h={""}
                    p={"2"}

                    alignItems="center"
                    justify="center">

                    <VStack spacing={0}>
                        <Select
                            onChange={selectedEq}
                            value={selectValue}
                            width="160px"
                            bg="white"
                            placeholder='Select a device'>
                            {data.map(item => (
                                <option key={item.id}>{item.equipmentId}</option>
                            ))}
                        </Select>
                    </VStack>

                    <VStack spacing={0}>
                        <DatePicker
                            portalId="root"
                            selected={startDate}
                            onChange={date => setStartDate(date)}
                            showTimeSelect
                            timeIntervals={5}
                            timeFormat="HH:mm"
                            dateFormat='yyyy/MM/dd h:mm'
                            isClearable
                            showYearDropdown
                            popperProps={{
                                positionFixed: true
                            }}
                        />
                    </VStack>
                </HStack>

            </Wrap>
            <MapContainer
                center={position}
                zoom={7}
                scrollWheelZoom={true}
                style={{ width: '100%', height: '95vh' }}
            >
                <TileLayer
                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                    url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
                />

                {data.map(item => {
                    if (item.equipmentId === selectValue)
                        return (
                            <Marker key={item.id} position={[item.latitude, item.longitude]} icon={GetIcon(item.equipmentId)}>
                                <Popup>{item.equipmentId}</Popup>
                            </Marker>
                        );
                })}

            </MapContainer>
        </Flex> 

Answer 1

I've struggled with this the whole day and after giving a break I found the solution.

Instead of putting MapContainer directly inside the Flex, I put it in a Box container and made box container's zIndex=1. This easy solution took my whole day to figure it out so I'm gonna leave my solution here :)

<Flex direction="column" bg={"#242b2c"}>
            <Wrap align="stretch"
                justify="stretch"
                alignContent="stretch"
                spacing={0}
                w="full">
                <HStack borderRadius="sm"
                    h={""}
                    p={"2"}

                    alignItems="center"
                    justify="center">

                    <VStack spacing={0}>
                        <DatePicker
                            portalId="root-portal"
                            bg="white"
                            width="160px"
                            selected={startDate}
                            onChange={date => setStartDate(date)}
                            showTimeSelect
                            timeIntervals={5}
                            timeFormat="HH:mm"
                            dateFormat='yyyy/MM/dd h:mm'
                            isClearable
                            showYearDropdown
                        />
                    </VStack>
                </HStack>

            </Wrap>
            <Box zIndex={1}>
                <MapContainer
                    center={position}
                    zoom={7}
                    scrollWheelZoom={true}
                    style={{ width: '100%', height: '95vh' }}

                >
                    *same code*

                </MapContainer>
            </Box>
        </Flex>