Why is React component only working after I refresh page? - reactjs

Question

I have a component called Tools which is accessed when I am on the route tools/:id. On this page, I have buttons with Links to this page, but it passes in a different id to the URL when clicked so that a different tool will be shown.
The getTool method just returns the correct component, and the component will only have one thing, an iFrame to show a calculator from another website.
So when I go back and forth between tools, the tools aren't loading until I click refresh. Otherwise, I get an error that says TypeError: Cannot read property 'style' of null. This is because I have document.getElementById('calc-SOME-NUMBER') but SOME_NUMBER is still referring to the last tool I was on. And this statement is within each tool and you can this below in BCalc.
I've checked the state, and when I go back and forth between tools, everything is correct; the correct tool is placed in the reducer. Any idea why this is happening? I was using history.go() as a workaround because I can't see any reason it still is lingering on to the old tools id.
const Tool = ({
getContent,
closeContent,
content: { content, loading, contents },
user,
match,
}) => {
const history = useHistory();
useEffect(() => {
scrollToTop();
getContent(match.params.id);
return () => {
logView(user, match.params.id, "tool");
closeContent();
history.go(); // doesn't work without this line
};
}, [getContent, closeContent, match.params.id, user]);
let ToolComponent;
const listItemStyle = { paddingTop: "40px", paddingBottom: "40px" };
return loading || content === null ? (
<Spinner />
) : (
<Container
style={{ marginTop: "3%" }}
fluid="true"
className="contentCardBody"
>
<Card>
<Card.Body>
{(ToolComponent = getTool(content.content_id.path))}
<ToolComponent />
</Card.Body>
</Card>
</Container>
);
};
Tool.propTypes = {
content: PropTypes.object.isRequired,
user: PropTypes.object.isRequired,
getContent: PropTypes.func.isRequired,
closeContent: PropTypes.func.isRequired,
};
const mapStateToProps = (state) => ({
content: state.content,
user: state.auth.user,
});
export default connect(mapStateToProps, {
getContent,
closeContent,
})(Tool);
Also, here is an example of what is returned from getTool():
const BCalc = () => {
const eventMethod = window.addEventListener ? 'addEventListener' : 'attachEvent';
const eventer = window[eventMethod];
const messageEvent = eventMethod === 'attachEvent' ? 'onmessage' : 'message';
eventer(
messageEvent,
(e) => {
if (e.origin === 'https://EXAMPLE.com') {
if (e.data.startsWith('height;')) {
document.getElementById('calc-SOME_NUMBER').style.height = `${e.data.split('height;')[1]}px`;
} else if (e.data.startsWith('url;')) {
window.location.href = e.data.split('url;')[1];
}
}
},
!1,
);
return (
<div>
<iframe
id="calc-SOME_NUMBER"
src="https://EXAMPLE_CALC"
title="tool"
scrolling="no"
style={{
width: '100%',
border: 'none',
marginTop: '-2%',
zIndex: '-1',
}}
/>
</div>
);
};
export default BCalc;