Icon button with InputBase

I'm a newbie to MUI/react and I've been trying to place an Icon button beside my input base form, however I'm struggling to make it so that the input form consumes all the available space in my search div. Instead my search icon wrapper is the one that takes majority of the space. I'm really confused what I'm doing wrong, Can someone please shed some light on me?

Here's my code:

import * as React from "react";
import { styled } from "@mui/material/styles";
import Box from "@mui/material/Box";
import InputBase from "@mui/material/InputBase";
import SearchIcon from "@mui/icons-material/Search";
import IconButton from "@mui/material/IconButton";

const Search = styled("div")(({ theme }) => ({
  display: "flex",
  position: "relative",
  borderRadius: 30,
  backgroundColor: "#ffffff",
  border: "1px",
  borderStyle: "solid",
  borderColor: "#55597d",
  // marginLeft: 10,
  width: "auto",
  ".MuiInputBase-root": {
    width: "100%",
  },
}));

const SearchIconWrapper = styled("div")(({ theme }) => ({
  padding: theme.spacing(0, 2),
  height: "100%",
  // position: 'absolute',
  // pointerEvents: 'none',
  display: "flex",
  alignItems: "center",
  justifyContent: "flex-end",
  // backgroundColor: 'black',
  width: "100%",
}));

const StyledInputBase = styled(InputBase)(({ theme }) => ({
  color: "inherit",
  "& .MuiInputBase-input": {
    padding: theme.spacing(1, 1, 1, 0),
    // vertical padding + font size from searchIcon
    paddingLeft: `calc(1em + ${theme.spacing(0)})`,
    paddingRight: `calc(1em + ${theme.spacing(4)})`,
    transition: theme.transitions.create("width"),
    width: "100%",
  },
}));

export default function SearchAppBar({
  searchQuery,
  setSearchQuery,
  clearGenre,
  onDropDownChange,
}) {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <Search
        sx={{
          width: { xs: "90vw", md: "50vw", lg: "30vw" },
          margin: "auto",
          marginBottom: "20px",
        }}
      >
        <form action="/" method="get">
          <StyledInputBase
            defaultValue={searchQuery}
                // placeholder="Search All Games…"
            inputProps={{ "aria-label": "search" }}
            type="search"
            name="s"
            id="site-search"
          />
        </form>
        <SearchIconWrapper>
          <IconButton>
            <SearchIcon style={{ color: "#55597d" }} />
          </IconButton>
        </SearchIconWrapper>
      </Search>
    </Box>
  );
}