My TextField element that changes border color on hover as of now:

<TextField
            variant="outlined"
            placeholder={placeholder}
            InputProps={{
                startAdornment: (
                    <InputAdornment position="start">
                        <SearchIcon />
                    </InputAdornment>
                ),
                endAdornment: (
                    <IconButton position="end" sx={{ "&:hover": { color: "#00AAA7" } }}>
                        <CloseIcon />
                    </IconButton>
                ),
            }}
            sx={{
                '& .MuiOutlinedInput-root': {
                    borderRadius: '30px',
                    '&:hover fieldset': {
                        borderColor: '#00AAA7',
                      },
                },
            }}
        />

I also want to change color of [startAdornment] i.e. nothing but an Icon when hovered on root.
How to do it?
Please help!