I have created a form with custom styled input component in react material ui,it goes something like this

onst StyledInputElement = styled('input')(`
  width: 200px;
  font-size: 1rem;
  font-family: IBM Plex Sans, sans-serif;
  font-weight: 400;
  line-height: 1.4375em;
  background: rgb(243, 246, 249);
  border: 1px solid #E5E8EC;
  border-radius: 10px;
  padding: 6px 10px;
  color: #20262D;
  transition: width 300ms ease;

  &:hover {
    background: #EAEEF3;
    border-color: #E5E8EC;
  }

  &:focus {
    outline: none;
    width: 320px;
    transition: width 200ms ease-out;
  }
`);

const CustomInput = React.forwardRef(function CustomInput(props, ref) {
  return (
    <InputUnstyled components={{ Input: StyledInputElement }} {...props} ref={ref} />
  );
});


const AuthDialog = (props) => {

  return (
    <>
      <CssBaseline />
      <Dialog
        fullWidthS
        onClose={() => {}}
        open={props.dilaogOpenProp}
        maxWidth="xs"
        sx={{
          backdropFilter: "blur(3px)",
        }}
      >
        <DialogTitle>Please login</DialogTitle>
        <DialogContent>
        <CustomInput aria-label="Demo input" placeholder="Username" />
        <br/>
        <CustomInput onClick aria-label="Demo input" placeholder="Password" />
        </DialogContent>
        <DialogActions>
          <Button onClick={props.handleDialogCloseProp}>Close</Button>
        </DialogActions>
      </Dialog>
      <Box
        sx={{
          minHeight: "100vh",
          background:
            "url(https://source.unsplash.com/random) no-repeat center center",
          backgroundSize: "cover",
        }}
      ></Box>
    </>
  );
}

export default AuthDialog;

Now it works something like this

As you can see on clicking one of the text fields is expanding but that leaves another text field to its same size, how do I apply text field expands CSS on both of the text fields even if I click any one of them?