Props interface for Arrow component

[MarisHeinols]

I am trying to add custom arrow in project that uses typescript for all other components like Int, KetName I found interfaces to use but for Arrow component can't find interface that would include data-expanded prop. As this type provided by IDE does not include such value - render?: ((props: SymbolsElement<"span">) => React.ReactNode) | undefined

<JsonView.Arrow
// eslint-disable-next-line @typescript-eslint/no-explicit-any
render={(props: any) => {
console.log(props);
const isExpanded = props['data-expanded'];
return (
<img
style={{
cursor: 'pointer',
width: '0.7rem',
marginRight: 10,
rotate: isExpanded ? '0deg' : '270deg',
}}
src="/icons/forms_selector.svg"
/>
);
}}
/>

[jaywcjlove]

@MarisHeinols You can refer to the example below.

<JsonView.Arrow
  render={(props) => {
    const svgProps: React.SVGProps<SVGSVGElement> = {
      style: {
        cursor: 'pointer', height: '1em', width: '1em', marginRight: 5, userSelect: 'none'
      },
      fill: "var(--w-rjv-arrow-color, currentColor)"
    }
    interface Props {
      // 其他属性...
      'data-expanded': boolean;
    }
    const isExpanded = (props as Props)['data-expanded'];
    if (!isExpanded) {
      return (
        <svg viewBox="0 0 24 24" {...svgProps}>
          <path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z" />
        </svg>
      );
    }
    return (
      <svg viewBox="0 0 24 24" {...svgProps}>
        <path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7,13H17V11H7" />
      </svg>
    );
  }}
/>