React-bootstrap Dropdown menu incorrectly aligned / positioned from translate3d property - react-bootstrap

Question

I'm using a React-bootstrap (v1.5.2) dropdown component passing in a custom toggle component, and the dropdown menu renders correctly upon the first click, but subsequent renderings of the dropdown menu causes the menu to appear way out of alignment with the toggle button. It appears that a CSS property, translate3D, mis-calculates the position for the dropdown menu beginning with the second render of the dropdown's menu. I've also noticed that the CSS data attribute, data-popper-placement, changes from its initial value of "bottom-end" to "bottom-start" after the first click on the dropdown button. I'm following the code pattern suggested in the React-bootstrap dropdown docs for custom components, and like I said before, the dropdown menu renders correctly for the first button click.
<Header>
{(headerFixed) => {
return (
<Fragment>
<HomePageNav />
<AssembledDropdownMenu headerFixed={headerFixed}>
{(toggle, setToggleState) => {
return (
<Dropdown
className="d-none d-lg-inline"
onToggle={setToggleState}
>
<Dropdown.Toggle as={toggle} />
<Dropdown.Menu
style={{
borderRadius: "16px",
boxShadow: "0 0 12px 0 rgba(0, 0, 0, 0.2)",
}}
align="right"
popperConfig={{
placement: "bottom-end",
modifiers: [
{
name: "offset",
options: {
offset: [0, 10],
},
},
],
}}
>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">
Another action
</Dropdown.Item>
<Dropdown.Item href="#/action-3">
Something else
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
);
}}
</AssembledDropdownMenu>
</Fragment>
);
}}
</Header>
import React, { Fragment, useState } from "react";
import Image from "next/image";
import styled from "styled-components";
export default function AssembledDropdownMenu({ headerFixed, children }) {
let [toggleState, setToggleState] = useState(false);
let toggle = React.forwardRef(({ children, onClick }, ref) => {
return (
<StyledButton
ref={ref}
onClick={(evt) => {
evt.preventDefault();
onClick(evt);
}}
className={
headerFixed ? (toggleState ? "fixed selected" : "fixed") : void 0
}
id="dropdown-custom"
data-display="static"
>
<div>
<Image
layout="fixed"
width={16}
height={16}
src={headerFixed ? "/icons-menu_b.svg" : "/icons-menu_w.svg"}
/>
</div>
<div>
<Image
layout="fixed"
width={24}
height={24}
src={headerFixed ? "/icons-profile_b.svg" : "/icons-profile_w.svg"}
/>
</div>
</StyledButton>
);
});
return children(toggle, setToggleState);
}
const StyledButton = styled.button`
display: flex;
flex-flow: row nowrap;
flex: 0 0 auto;
width: 88px;
height: 40px;
margin: 3px 165px 12px 0px;
padding: 8px 18px;
border-radius: 32px;
box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.5);
border: solid 1px rgba(255, 255, 255, 0.5);
background-color: rgba(255, 255, 255, 0.25);
&.fixed {
box-shadow: none;
border: solid 1px #cccccc;
background-color: #ffffff;
}
&.fixed.selected {
box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);
/*border: solid 1px #cccccc;
background-color: #ffffff;*/
}
& > div {
width: 16px;
height: 16px;
margin: -6px 12px 4px 0;
object-fit: contain;
}
& div + div {
width: 24px;
height: 24px;
margin: -2px 0 0 3px;
object-fit: contain;
}
`;