How to pass in JSX argument in React/Redux with Typescript?

Question

JavaScript

I decided to try using TS for React development and ran into a problem that I didn’t quite understand.
I want to pass JSX code into the action-creator arguments of the modal window (in order to pass different views there as needed), but for some reason TS swears and behaves inappropriately.
He justifies this with this:

[ts] Type "boolean" cannot be assigned to type "Element". [2322]
modal.ts(63, 5): The expected type comes from property 'message' which is declared here on type 'IModalOptions'

Here is the code from where I call action-creator

export const logout = () => {
    return (dispatch: Dispatch<any>) => {
        dispatch({
            type: AUTH_LOGOUT
        });
        dispatch(modalOpen({
            message: <div>TEST</div>
        }));
    }
}

Here is the action-creator itself

interface IModalOptions{
    message: JSX.Element;
    isCanClose?: boolean
}
export const modalOpen = ({message, isCanClose = true} : IModalOptions) => {
    return (dispatch: Dispatch<any>) => {
        dispatch({
            type: MODAL_OPEN,
            message,
            isCanClose
        });
    }
}

I tried to set the type to any, but it had no effect.

[ts] Cannot find name "div". [2304]

Please tell me how to deal with this, maybe there is some kind of separate type for this, or do I need to wrap it somehow? Or maybe it's a fundamentally wrong idea to throw JSX into arguments in general? On the usual React, such an implementation worked quite well for itself.

Answer 1

Found the solution myself. If you change the action file format from .ts to .tsx, then the div appears in its context and can be treated as JSX.Element or React.ReactNode.

Answer 2

message: '<div>TEST</div>' The
quotes will fundamentally have an effect