Why do the buttons open the same component instead of opening each button each component?

I have one parent component with 3 buttons and 3 children components. Each button should open one component but with my code the 3 buttons open the same component when I click on the buttons.
The children components are in 3 different files and the parent component has one state. Can anyone tell me what's wrong in my code.
I pasted one child component example but they're 3 alerts.
Besides, my task for school specifies this: The state should have three values representing info, success and failed. How can I do it?

parent component

export const Messages = () => {
const [showInfo, setShowInfo] = useState(false);
return (
<Stack>
<Button
onClick={() => setShowInfo(true)}
>
open info message
</Button>
<InfoMessage open={showInfo} onClose={()=> setShowInfo(false)} />
<Button
onClick={() =>  setShowInfo(true)}
>
open success message
</Button>
<SuccessMessage open={showInfo} onClose={()=>  setShowInfo(false)} />
<Button
onClick={()=>  setShowInfo(true)}
>
open error message
</Button>
<ErrorMessage open={showInfo} onClose={() =>  setShowInfo(false)} />
</Stack>
)
}

Child component (one example)

interface InfoMessageProps {
open: boolean;
onClose: () => void;
}
export const InfoMessage = ({ open, onClose }: InfoMessageProps) => {
const handleClose = (): void => {
onClose();
};
return (
<Snackbar
open={open}
autoHideDuration={4000}
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
onClick={handleClose}
// TransitionComponent={transition}
>
<Alert
sx={{
width: '487px',
height: '104px',
paddingTop: '20px',
paddingLeft: '20px',
backgroundColor: '#FDFDFD',
}}
icon={false}
action={(
<IconButton
aria-label="close"
color="inherit"
size="small"
onClick={handleClose}
>
<CloseIcon fontSize="inherit" />
</IconButton>
)}
>
<AlertTitle sx={{ paddingRight:'80px' }}>
<Typography variant='headings.h4'>title</Typography>
</AlertTitle>
<Typography variant='captions.default'>Insert message here</Typography>
</Alert>
</Snackbar>
);
};

I think it could be your solution

export const Messages = () => {
const [msgStatus, setMsgStatus] = useState("");      
return (
<Stack>
<Button
onClick={() => setMsgStatus("info")}
>
open info message
</Button>
<InfoMessage open={msgStatus === "info"} onClose={()=> setMsgStatus("")} />
<Button
onClick={() =>  setMsgStatus("success")}
>
open success message
</Button>
<SuccessMessage open={msgStatus === "success"} onClose={()=>  setMsgStatus("")} />
<Button
onClick={()=>  setMsgStatus("error")}
>
open error message
</Button>
<ErrorMessage open={msgStatus === "error"} onClose={() =>  setMsgStatus("")} />
</Stack>
)
}

Because you should use different states for each component. What's happening is because showInfo is true, every component is being rendered and overlapping with each other.

EDIT:

You can change your onClick function and have a condition to render each component:

export const Messages = () => {
const [showInfo, setShowInfo] = useState(false);
const [conditionalState,setConditionState] =useState(false);
const setShow = (value) => {
setShowInfo(true);
setConditionState(value);
}
return (
<Stack>
<Button
onClick={() => {setShow(0)}
>
open info message
</Button>
{conditionalState === 0 && 
<InfoMessage open={showInfo} onClose={()=> setShowInfo(false)} />
}
<Button
onClick={() => {setShow(1)}
>
open success message
</Button>
{conditionalState === 1 && 
<SuccessMessage open={showInfo} onClose={()=>  setShowInfo(false)} />
}
<Button
onClick={() => {setShow(2)}
>
open error message
</Button>
{conditionalState === 2 && 
<ErrorMessage open={showInfo} onClose={() =>  setShowInfo(false)} />
}
</Stack>
)
}

A minor correction is needed in your code.
You should have different states for different alerts in your parent.js like this :

export const Messages = () => {
const [showStatus, setShowStatus] = useState("");
return (
<Stack>
<Button
onClick={() => setShowStatus("info")}
>
open info message
</Button>
<InfoMessage open={showStatus=="info"} onClose={()=> setShowStatus("")} />
<Button
onClick={() =>  setShowStatus("success")}
>
open success message
</Button>
<SuccessMessage open={showStatus == "success"} onClose={()=>  setShowStatus("")} />
<Button
onClick={()=>  setShowStatus("error")}
>
open error message
</Button>
<ErrorMessage open={showStatus=="error"} onClose={() =>  setShowStatus("")} />
</Stack>
)
}