Button placement next to Input field with Mantine React

I am trying to place a button next to an input field in react using the Mantine library. My input field looks like this (with styling):

const useStyles = createStyles((theme, { opened }: { opened: boolean }) => ({
  control: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    padding: `${theme.spacing.xs} ${theme.spacing.md}`,
    borderRadius: theme.radius.md,
    border: `${rem(1)} solid ${
      theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[2]
    }`,
    transition: "background-color 150ms ease",
  },

  label: {
    fontWeight: 500,
    fontSize: theme.fontSizes.sm,
  },

  icon: {
    transition: "transform 150ms ease",
    transform: opened ? "rotate(180deg)" : "rotate(0deg)",
  },
}));

And the component itself is given as:

//general input field, takes any string
export const ApprovalStatus: React.FC<GenericInputFormProps> = ({
  label,
  placeholder,
  index,
}) => {
  ... # retrieving data etc.
  return (
    <>
      <Autocomplete
            // dropdownComponent={}
            maxDropdownHeight="280px"
            label={label}
            limit={20}
            placeholder={placeholder}
            className={classes.control}
            value={value}
            onChange={setValue}
            data={flatData}
          />
    </>
  );
};

This creates the following component:

Example of created input field

Now, I would like to add a small button right of the description to explain more in depth what the input field expects.

I tried to do that using the Popover function from Mantine:

 return (
    <>
      <Popover width={200} position="top" withArrow shadow="md">
        <Popover.Target>
          <ActionIcon variant="filled">
            <IconQuestionMark size="1.125rem"/>
          </ActionIcon>
        </Popover.Target>
        <Popover.Dropdown>
          <Text size="sm">
            Test popover
          </Text>
        </Popover.Dropdown>
      </Popover>
      <Autocomplete
            // dropdownComponent={}
            maxDropdownHeight="280px"
            label={label}
            limit={20}
            placeholder={placeholder}
            className={classes.control}
            value={value}
            onChange={setValue}
            data={flatData}
          />
    </>
  );
};

The result, however, is as follows:

Button added

As you can see the button comes, logically so, above the input field. Does anyone have any idea how I can style the button such that it appears left of the input field, within the borders? Any help is appreciated. Everything is done in React using the Mantine library

You could make use of the styles or classNames attribute from <Autocomplete /> to modify your design as per your liking.

import {
  Autocomplete,
  ActionIcon,
} from '@mantine/core';

<Autocomplete
  data={['React', 'Angular', 'Svelte', 'Vue']}
  rightSection={<ActionIcon onClick={console.log}>A</ActionIcon>}
/>