I use React and Typescript for my web app front-end and have functional components as such:

TrackerList contains: Header and TrackerListContent
TrackerListContent contains: StyledAlert
Header contains: HeaderUserIcon
HeaderUserIcon contains: StyledAlert

The StyledAlert is an independent instance in those components. The components that render those instances have their own state variables which get passed as props to the StyledAlert component respectively as such:

Contents at the bottom of the return in TrackerListContent:
<StyledAlert key="sa-tlc" title={styledAlertTitle} message={styledAlertMessage} level={styledAlertLevel} show={showStyledAlert} fingerprint={styledAlertFingerprint} blocking={true} />

Contents at the bottom of the return in HeaderUserIcon:
<StyledAlert key="sa-hui" title={styledAlertTitle} message={styledAlertMessage} type={styledAlertType} level={styledAlertLevel} show={showStyledAlert} fingerprint={styledAlertFingerprint} blocking={true} callback={navigateToDebug} />

Problem

What happens is in HeaderUserIcon, the state variables that get passed to it’s instance of StyledAlert somehow manage to affect the data in the TrackerListContent component’s instance of StyledAlert.

The components do not share state to a parent via lifting or any other method I’m aware of, I have tried naming the state variables differently so the names aren’t the same, I have ensured using React dev tools for firefox that each instance does indeed have the correct data but still it’s somehow rendering information from the completely different instance of the completely different component.

Example

I set the following in HeaderUserIcon
setStyledAlertTitle("Invalid Developer Code")
setStyledAlertMessage("The developer code you entered was not valid")
setStyledAlertLevel("error")
setStyledAlertType("alert")
setShowStyledAlert(true)
setStyledAlertFingerprint(!styledAlertFingerprint)

And I set the following in TrackerListContent
setStyledAlertLevel("warning")
setStyledAlertTitle("Rental Age")
setStyledAlertMessage("This rental is older than " + maxTimeframe + " months. Please ensure this is the correct rental you will be working with.")
setStyledAlertFingerprint(fingerprintSwitch.current)
setShowStyledAlert(true)

No matter what I name the variables the issue persists that the HeaderUserIcon title and message state that should only be used within the HeaderUserIcon component gets used in the TrackerListContent component. Strangely enough, though, the Alert Level state, which controls the color of the alert’s title bar, is correct. In the TrackerListContent component that bar should be red, or set to level of “error”, and in the HeaderUserIcon it should be gray, or set to level of “information”. These things work even though the text is wrong.

What I’ve Tried

• Changing the state variables names so they aren’t the same in each component
• Taking ChatGPT’s ( often horrible ) advice to wrap the component in a React.memo
• Debugged using React dev tools to verify each instance does in fact contain the correct text
• Manually remove the second instance from the DOM completely ( this causes the alert to render correctly )
• Tried using a conditional render in the TrackerListContent and HeaderUserIcon components to decided whether or not to even render the StyledAlert to begin with ( same issues )
• Ensured my StyledAlert components have unique keys

Any help would be appreciated.