如何在 Material-UI 中创建与 OutlinedInput 齐平的 InputAdornment IconButton？

Question

I'm trying to reproduce a text input from a mockup and am having trouble making it match. The project I'm working on uses Material-UI, so it needs to be made up of components from that library. Initially I tried rendering a button next to the input, but that didn't look good at all and would be unacceptable. When I moved onto trying InputAdornments, I am getting closer but can't seem to be able to get the button flush with the input, like in the mockup.

Below is the code that I have so far. If anyone has any ideas I'd be very grateful!

<OutlinedInput
            id="outlined-add-region"
            type="text"
            value="Ajouter une région"
            onChange={handleChange("password")}
            endAdornment={
              <InputAdornment position="end">
                <button
                  aria-label="toggle password visibility"
                  onClick={handleClickShowPassword}
                  onMouseDown={handleMouseDownPassword}
                  edge="end"
                >
                  <Add />
                </button>
              </InputAdornment>
            }
          />

Answer 1

I played around with it a bit on code sandbox and got it close to your mockup.
Perhaps this will get you started:

<OutlinedInput
  style={{height: "40px", width: "250px"}}
  id="outlined-add-region"
  type="text"
  value="Ajouter une région"
  onChange={() => {}}
  endAdornment={
    <Button 
      style={{
        position: "absolute",
        right: 0,
        height: "100%",
        backgroundColor: "#f0f8ff",
        color: "#5072a7",
      }}
    >
      <Add style={{fontSize: "25px"}} />
    </Button>
  }
/>