typescript - xState 型にアクセスするときの Typescript is not assignable エラー

Question

こんにちは、私は修正しようとしているコンポーネントで小さなタイピングの問題を抱えています:

interface ChildrenProps {
  exit: (force?: boolean) => void;
  state: StateValue;
}
interface Props {
  // https://reactjs.org/docs/render-props.html
  children: (childrenProps: ChildrenProps) => {};
  close: () => void;
  isOpen: boolean;
  state: StateValue;
}
const ModalDialog: React.FC<Props> = function (props) {
  const { children, close, isOpen } = props;
  const layers = useContext(LayersContext);
  const [state, send] = useMachine(modelDialogMachine, {
    actions: {
      close,
    },
  });
  ...
  const childrenProps = { state: state.value, exit: sendExitEvent };

  return ReactDOM.createPortal(
    <ModalDialogContext.Provider value={contextValue}>
      <Backdrop className={state.value} onClick={handleBackdropClick}>
        <Dialog onClick={handleDialogClick}>{children(childrenProps)}</Dialog>
      </Backdrop>
    </ModalDialogContext.Provider>,
    container,
  );
};

<Backdrop className={state.value} onClick={handleBackdropClick}>私は得ています：

 Type 'StateValue' is not assignable to type 'string | undefined'.
      Type 'StateValueMap' is not assignable to type 'string'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<"div", DefaultTheme, {}, never>): ReactElement<StyledComponentPropsWithAs<"div", DefaultTheme, {}, never>, string | ... 1

ステート マシン ライブラリのStateValue型はどこにありますか。import { StateValue } from 'xstate'xstate

クラス名は、スタイルを切り替えるために使用されます。

export const Backdrop = styled.div`
  &.entering {
  ...

この入力エラーを解決するにはどうすればよいですか?こんにちは、修正しようとしているコンポーネントで小さな入力の問題が発生しています。

interface ChildrenProps {
  exit: (force?: boolean) => void;
  state: StateValue;
}
interface Props {
  // https://reactjs.org/docs/render-props.html
  children: (childrenProps: ChildrenProps) => {};
  close: () => void;
  isOpen: boolean;
  state: StateValue;
}
const ModalDialog: React.FC<Props> = function (props) {
  const { children, close, isOpen } = props;
  const layers = useContext(LayersContext);
  const [state, send] = useMachine(modelDialogMachine, {
    actions: {
      close,
    },
  });
  ...
  const childrenProps = { state: state.value, exit: sendExitEvent };

  return ReactDOM.createPortal(
    <ModalDialogContext.Provider value={contextValue}>
      <Backdrop className={state.value} onClick={handleBackdropClick}>
        <Dialog onClick={handleDialogClick}>{children(childrenProps)}</Dialog>
      </Backdrop>
    </ModalDialogContext.Provider>,
    container,
  );
};

<Backdrop className={state.value} onClick={handleBackdropClick}>私は得ています：

No overload matches this call.
  Overload 1 of 2, '(props: Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | ... 252 more ... | "onTransitionEndCapture"> & { ...; }, "ref" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "ref" | ... 254 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type 'StateValue' is not assignable to type 'string | undefined'.
      Type 'StateValueMap' is not assignable to type 'string'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<"div", DefaultTheme, {}, never>): ReactElement<StyledComponentPropsWithAs<"div", DefaultTheme, {}, never>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error.

ステート マシン ライブラリのStateValue型はどこにありますか。import { StateValue } from 'xstate'xstate

クラス名は、スタイルを切り替えるために使用されます。

export const Backdrop = styled.div`
  &.entering {
  ...

私が文字列を取得console.logする場合state.value：

ModalDialog.js:79 exited
ModalDialog.js:79 entering
ModalDialog.js:79 entered

StateValueとの入力StateValueMap

export declare type StateValue = string | StateValueMap;

export interface StateValueMap {
    [key: string]: StateValue;
}

この入力エラーを解決するにはどうすればよいですか?