How to resolve "argument of type 'boolean' is not assignable..."

I've an input component and I'd like to create unit tests for it. I'm having few errors and I can't fix it. I already see in few blogs, but I don't understand how to resolve it. I'm trying to improve my knowledge in unit tests, but it's complicated.

Here's my code I put into codesandbox:

I don't understand why I've this error, because I don't have any Boolean parameter. How can I resolve it?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import React from 'react';
import { render, screen } from '@testing-library/react';
import TextInput from './TextInput';
import { TextInputProps } from 'src/types';

describe('Text Input', function () {
  it('should render default', function () {
    const props: TextInputProps = {
      change(): void {},
      value: '',
      placeholder: 'Full Name',
      variant: 'neutral',
    };

    render(<TextInput {...props} />);
    expect(screen.getByRole('textbox')).toBeInTheDocument();
    expect(screen.getByRole('textbox')).toHaveAttribute(
      'placeholder',
      'Full Name'
    );
    expect(screen.getByRole('textbox')).toHaveAttribute('value', '');
  });
});

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import React from 'react';
import { TextInputProps } from 'src/types';
import './index.scss';

const TextInput = ({
  value,
  placeholder,
  type = 'text',
  variant,
  change,
}: TextInputProps) => {
  const inputVariant = `input-field ${
    variant === 'highlight' ? 'highlight' : ''
  }`;

  return (
    <div className="content-input">
      <input
        className={inputVariant}
        value={value}
        placeholder={placeholder}
        type={type}
        onChange={change}
      />
    </div>
  );
};

export default TextInput;

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import { ChangeEventHandler } from 'react';

export interface TextInputProps {
  value: string;
  placeholder: string;
  type?: 'text' | 'password' | 'email';
  variant: 'neutral' | 'highlight';
  change: ChangeEventHandler<HTMLInputElement>;
}

<!-- end snippet -->

Use a .tsx file, not a .ts one.

On the example you sent, I was able to reproduce the error, then noticed you were using a .ts file. Rename it to .tsx and the error is gone.