Styled Text Field - Copy this React, Mui Component to your project

quiero hacer un texfiel con este diseño como esta echo en box <Box onClick={onClick} sx={{ display: "flex", height: "48px", padding: "0px 12px", alignItems: "center", gap: "8px", alignSelf: "stretch", borderRadius: isActive ? "4px" : "none", border: isActive ? "1px solid #E2E5E8" : "", borderBottom: isActive ? "1px solid #E2E5E8" : "1px solid #E2E5E8", boxShadow: isActive ? "0px 4px 12px 0px rgba(30, 41, 71, 0.08)" : "none", backgroundColor: isActive ? "#FFFFFF" : "none", ":hover": { border: isActive ? "1px solid #F5A458" : "none", borderBottom: isActive ? "" : "1px solid #F5A458", background: isActive ? "#FFFAF7" : "none", // border: `1px solid ${bgColor}`, }, }} > {/*TEXTO */} <Box sx={{ display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "flex-start", flex: "1 0 0", }} > <Typography color={isActive ? "none" : "#88919E"} fontFamily="Poppins" fontSize="13px" fontStyle="normal" fontWeight={500} lineHeight="14px" > {label} </Typography> <Typography alignSelf="stretch" color={isActive ? "none" : "#88919E"} fontFamily="Poppins" fontSize="14px" fontStyle="normal" fontWeight={300} lineHeight="16px" > {labelfeha} </Typography> </Box> {/*ICONO */} <Box component={"img"} src={iconName} /> </Box>