Proper way to TextInput with send button

[cunning salmon]

I'm trying to make a simple textinput with send button. It works but I'm not sure this is best practice.

interface TodoInputProps {
  append: (...items: string[]) => void
}
const TodoInput = ({ append }: TodoInputProps) => {
  const [str, setStr] = useInputState('')

  return (
    <Group>
      <TextInput value={str} onChange={setStr} />
      <ActionIcon
        onClick={() => {
          append(str)
          setStr('') // <-- here
        }}
      />
    </Group>
  )
}

[plush flint]

That's totally fine to do, however, you might want to take a look at the MultiSelect: https://mantine.dev/core/multi-select/

[static widget]

this is fine. I'd recommend spelling out your variables and maybe being more specific than string

[cunning salmon]

also, would there be a best practice for listening for enter keypress only when textinput is active?