How to correctly set react useState using generics - reactjs

Question

Core question - where am I messing up my useState
const [data, setData] = useState<IAssetGetManyResponseDto<IAssetResponseDto>>();
so that the data object I'm sending down as props is undefined?
My (functioning) api call looks like this
export const getAllAssets = async (
): Promise<IAssetGetManyResponseDto<IAssetResponseDto>> => {
console.log("get all assets ran in api.ts!")
const response = await amsApiClient.get(ASSET_ENDPOINT(),
{
params: {
limit: 1000
}
}
);
console.log("logging response data "+JSON.stringify(response.data))
return response.data;
};
Here are the types being used:
export interface IAssetGetManyResponseDto<T> {
items: T[];
totalCount: number;
}
export interface IAssetResponseDto {
id: string | null;
name: string | null;
type: string | null;
url: string | null;
// metadata: IMetadataObj| null;
tags: Array<string> | null;
thumbnailImageURL: string | null;
createdAt: number | null;
updatedAt: number | null;
}
And here is the component that makes the call, to show context
export const AssetManagementTable = () => {
const [data, setData] = useState<IAssetGetManyResponseDto<IAssetResponseDto>>();
const getAssets = async () => {
console.log("getAssets ran!")
const assets = await getAllAssets();
console.log("logging data from asset managment table " + data)
console.log("logging assets from asset managment table " + assets)
setData(assets)
}
useEffect(() => {
getAssets()
}, []);
return (
<div>
<NewAssetTable items={data} />
</div>
);
};
Elsewhere in my app, when I pass props down and refer to props.items.map((item: any). => {... I'm getting undefined.
More specifically, TypeError: Cannot read properties of undefined (reading 'map')
Am I messing up the argument to useState by improperly specifying types?
Thanks!

Answer 1

Looks like type definitions for React.useState are little unsafe. They don't augment return type with undefined for variant with no arguments.
So, if you told that state will always contain IAssetGetManyResponseDto<IAssetResponseDto>, TS compiler believes it.
Hover on data to see it has IAssetGetManyResponseDto<IAssetResponseDto> while it should be IAssetGetManyResponseDto<IAssetResponseDto> | undefined.
Workaround:
useState<IAssetGetManyResponseDto<IAssetResponseDto> | undefined>()
useState<IAssetGetManyResponseDto<IAssetResponseDto>>(someFunctionalMockOfYourData)