How to add custom type to selected option for onChange event in React-Select

I created a SelectBox component using react-select and added onChange event for it.
I would like to add a type "SelectedItemType" to the selected option in onChange event.
However the onChnage event is of type
(property) onChange?: ((newValue: unknown, actionMeta: ActionMeta<unknown>) => void) | undefined
Hence the option type is unknown and its preventing me from adding types other than unknown which makes it difficult to extract the object attributes from option

import { ForwardedRef, forwardRef } from "react";
import Select, { SelectInstance } from "react-select";

export type SelectedItemType = {
value: string;
label: string;
};

export type SelectProps = {
options: SelectedItemType[];
ref?: ForwardedRef<SelectInstance>;
onChange: (selectedItem: unknown) => void;
};

const SelectBox: React.FC<SelectProps> = forwardRef<
SelectInstance,
SelectProps
>(({ options, onChange, ...props }, ref) => {
return (
<Select
options={options}
ref={ref}
{...props}
onChange={(newValue: unknown) => onChange(newValue)}
/>
);
});

export default SelectBox;

In the above code I would like to add SelectedItemType to the newValue for onChange. However its throwing an error saying
Type '(newValue: SelectedItemType) => void' is not assignable to type '(newValue: unknown, actionMeta: ActionMeta<unknown>) => void'.
Types of parameters 'newValue' and 'newValue' are incompatible.
Type 'unknown' is not assignable to type 'SelectedItemType'.
How do I add this custom Type to the option as I want to extract the value and label from the option.

If you would like to assign type to newValue to SelectedItemType so that its properties can be easily accessed in onChange function then it can be done by doing two main changes.

1. Change type of onChange property of SelectProps as

export type SelectProps = {
  options: SelectedItemType[];
  ref?: ForwardedRef<SelectInstance>;
  onChange: (selectedItem: SelectedItemType) => void;
};

2. Then in select component its onChange would be modified as

<Select
      options={options}
      ref={ref}
      {...props}
      onChange={(newValue: unknown) => onChange(newValue as SelectedItemType)}
    />

Then use your SelectBox component like:

<SelectBox
        options={[
          { label: "A", value: "1" },
          { label: "B", value: "2" }
        ]}
        onChange={function (selectedItem: SelectedItemType): void {
          console.log(selectedItem.value);
        }}
      />

Here is full code for file App.tsx

import { ForwardedRef, forwardRef } from "react";
import Select, { SelectInstance } from "react-select";

export type SelectedItemType = {
  value: string;
  label: string;
};

export type SelectProps = {
  options: SelectedItemType[];
  ref?: ForwardedRef<SelectInstance>;
  onChange: (selectedItem: SelectedItemType) => void;
};

const SelectBox: React.FC<SelectProps> = forwardRef<
  SelectInstance,
  SelectProps
>(({ options, onChange, ...props }, ref) => {
  return (
    <Select
      options={options}
      ref={ref}
      {...props}
      onChange={(newValue: unknown) => onChange(newValue as SelectedItemType)}
    />
  );
});

export default function App() {
  return (
    <div className="App">
      <SelectBox
        options={[
          { label: "A", value: "1" },
          { label: "B", value: "2" }
        ]}
        onChange={function (selectedItem: SelectedItemType): void {
          console.log(selectedItem.value);
        }}
      />
    </div>
  );
}