Adding a property to an input element with TypeScript

I created an input element with emotion react, and that input element has a custom property named pointer:

  <InputField
    placeholder={placeholder}
    pointer={insidePool}
    readOnly={insidePool}
    type={type}
    onChange={onChange}
  />

The InputField object:

    const InputField = styled('input')(({ pointer }) => ({
      all: 'unset',
      width: 200,
      display: 'inline-flex',
      alignItems: 'center',
     .....
    }));

TS is complaining that pointer doesn't exist on the input element. I'm trying to add an interface for it like so:

export interface ExtendedInput
  extends React.DetailedHTMLProps<
    React.InputHTMLAttributes<HTMLInputElement>,
    HTMLInputElement
  > {
  pointer: boolean;
}

And then assigning it to the InputField creation object:

const InputField: ExtendedInput = styled('input')(({ pointer }) => ({

Then TS complains that property pointer is missing in that styled object, and also complaining that the InputField in JSX: JSX element type 'InputFIeld' does not have any construct or call signatures.

I know it's possible to solve this with ts-ignore, and such, but would really like to solve it with an interface is possible. What am I doing wrong?