Radio button onChange event not firing if a new element is added - reactjs

Question

Hope you are well, I stumbled upon an issue that I do not understand and before looking any further into the (pretty convoluted) code I inherited, I want to check with you if this is an expected behaviour.
{Object.keys(locations).map((keyName) => {
const { name: territoryName, code: territoryCode } = locations[keyName];
return (
<RadioButton
key={`LGRB${territoryName}`}
style={{ margin: '10px 0' }}
onChange={() => console.log('onChange')}
checked={territoryCode === selectedTerritoryCode}
name={territoryName}
label={territoryName}
dark
rightAlign
/>
);
})}
All works fine and as expected, it renders a series of radio buttons with selectable locations, onChange triggers as expected.
If I now push a new element to locations, it correctly renders the new element but:
First time a user clicks on any of the radio buttons, the onChange event doesn't trigger
Second time a user clicks on any of the radio buttons, the onChange event now triggers
Why?
Thank you for any help
Edit:
This is the <RadioButton> component:
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { RadioButton as GrommetRadioButton } from 'grommet';
const RadioButtonWrapper = styled.div`
StyledComponentsStyles omitted
`;
const RadioButton = ({ dark, rightAlign, ...props }) => (
<RadioButtonWrapper dark={dark} rightAlign={rightAlign}>
<GrommetRadioButton {...props} />
</RadioButtonWrapper>
);
RadioButton.propTypes = {
dark: PropTypes.bool,
rightAlign: PropTypes.bool,
};
export default RadioButton;

Answer 1

I think there is an issue with how the state of the checked RadioButton is being handled. To remove the clutter of handling this state and these strange side-effects coming from the rendering of individual RadioButton, try to see if RadioButtonGroup is solving your problem, it will be more straightforward to control the RadioButton(s) input events and state management.
Just for a POC, here is an example code that uses RadioButtonGroup, with dynamically added RadioButton items that react (pun intended) as expected to onChange events.
import React, { useState } from "react";
import { render } from "react-dom";
import { grommet, Box, Grommet, RadioButtonGroup } from "grommet";
export const App = () => {
const [fruits, setFruits] = useState(["pear", "banana", "mango"]);
const [value, setValue] = useState(fruits[0]);
const [counter, setCounter] = useState(0);
const handleOnChange = (event) => {
console.log(event.target.value);
setValue(event.target.value);
setFruits([...fruits, "apple" + counter]);
setCounter(counter + 1);
};
return (
<Grommet theme={grommet}>
<Box pad="small">
<RadioButtonGroup
name="radio"
options={fruits}
value={value}
onChange={(event) => handleOnChange(event)}
/>
</Box>
</Grommet>
);
};
render(<App />, document.getElementById("root"));
I'm not sure if that is the answer you were hoping for, but consider it as best practice advice in case you are planning to refactor the current behavior. Good luck!