How to implement custom dropdown toggle state with react bootstrap dropdown - react-bootstrap

Question

I am trying to implement a custom toggle for a react dropdown that has a chevron up and down on the arrow.
I tried moving the toggle inside the LocaleSwitcher function and use the state from that component, but it causes some type of error where the document gets unbound from the component after updating the state once, the next click it breaks.
I'm not familiar with the forward referencing, the code was mostly copy paste from a google article, so I'm not 100% sure how it's working.
My question is, in the code below - is there a way to detect and update the state to switch the up/down arrow?
{**how to toggle a condition to show/hide based on dropdown state? ** ? upArrow : downArrow}
import styles from "./LocaleSwitcher.module.scss";
import Dropdown from "react-bootstrap/Dropdown";
import React, {useState} from 'react';
// found this code on Google.
const downArrow = (
<span>▲</span>
)
const upArrow = (
<span>▼</span>
)
const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
<a
href=""
ref={ref}
onClick={(e) => {
e.preventDefault();
onClick(e);
}}
>
{children}
{true ? upArrow : downArrow}
</a>
));
const LocaleSwitcher = (props) => {
const data = [
{label: "Australia (AU$)", currency: 'AUD', locale: 'en_AU', link: 'https://www.rmwilliams.com.au'},
{label: "Canada (CAD$)", currency: 'CAD', locale: 'en_CA', link: 'https://www.rmwilliams.com'},
{label: "Denmark (kr.)", currency: 'Kr.', locale: 'en_AU', link: 'https://www.rmwilliams.com.au'}
];
const [locale, setLocale ] = useState(data[0]);
const [show, setShow] = useState(false);
const onToggle = (args) => {
console.log(JSON.stringify(args, null, 2));
setShow(args);
}
const onSelect = (args) => {
const locale = data.find((item) => item.label === args);
console.log(JSON.stringify(args, null, 2));
console.log('found ' + JSON.stringify(locale));
setLocale(locale);
}
return (
<div className={styles.locale_switcher}>
<Dropdown onToggle={onToggle} onSelect={onSelect}>
<Dropdown.Toggle as={CustomToggle} variant="success" id="dropdown-basic">
{locale.label}
</Dropdown.Toggle>
<Dropdown.Menu>
{data.map((locale) => <Dropdown.Item key={locale.label} eventKey={locale.label}>{locale.label}</Dropdown.Item>)}
</Dropdown.Menu>
</Dropdown>
</div>
);
};
export default LocaleSwitcher;