Typescript error with React (div element)

TL;DR - use aria-relevant="all" instead.

There's a code in your app that might look like this

<Flex ... aria-relevant="additions removals">...</Flex>

You can find it by searching globally on your project with regex:

<Flex(.|\n)*?aria-relevant="additions removals"

According to the MDN docs:

A space-delimited list of one or more of the following values:

• additions Element nodes added to the accessibility tree within the live region; should be considered relevant.
• removals are deletion of nodes in the accessiblity tree; should be considered relevant.
• text are changes to the textual content of existing nodes; should be considered relevant.
• all is equivalent to additions removals text.
• aria-relevant="additions text" is the default value on a live region.

In your case, you may want to use all instead of your current value (additions removals) This is equivalent to additions removals text and it's a valid, what I can't say about the value "additions removals".

Actually, I think you are not very familiar with TypeScript in ReactJS, Even you don't know about the rest of destructuring props in ReactJS, the div JSX will transform to read <div> HTML element by ReactDOM, so you should care about every passing prop because every prop will transform to HTML Attribute, so passing rest to is a fault, I mean:

~~~ ({
 somePropName,
 ...rest
}) => (
  <div {...rest} // -- this passing rest is a fault

And about TypeScript in ReactJS, I really offer you to buy Maximilian Schwarzmüller, TypeScript training, and especially study the ReactJS module.

By the way, the right way of writing of your component is the below code:

import React, { FC, ReactNode } from 'react';
import cn from 'classnames';

interface FlexProps {
  direction?: 'row' | 'column';
  reverse?: boolean;
  inline?: boolean;
  children: ReactNode;
  className: string;
}

const Flex: FC<FlexProps> = ({
  direction = 'row',
  reverse,
  inline,
  className,
  children,
}) => {
  const flex: string = inline ? 'inline-flex' : 'flex';

  const directionReverse: string = [
    'flex',
    direction,
    reverse && 'reverse',
  ].join('-');

  const classNames: string = cn(flex, directionReverse, className);

  return <div className={classNames}>{children}</div>;
};

export default Flex;

Why you pass a default false value to the boolean prop?? when a developer(even you) use your Flex component and do not pass a boolean prop, so it will be undefined and by the JavaScript, the coercion will happen and the value will be a _false` boolean value.

Instead of type JSX.Element pass a regular TypeScirpt-React valid type, hence, ReactNode, easy.

Also by using FC<FlexProps> there is no need to have }: FlexProps) => { only the }) => { is enough.

If in future a new prop name will be needed, Ok, add it to the interface and use it in the component but do not pass a rest of props. it is not a valid way in ReactJS development.