Александр

const addAdditionally = (addtive) => setActiveAddtive((currentAddtive) =>
    currentAddtive.includes(addtive)
        ? currentAddtive.map((entry) => entry === addtive ? 1 : entry)
        : [...currentAddtive, addtive]
);

https://codesandbox.io/s/qna-q-1163968-01t3hs?file...

Можете написать свою обёртку - https://github.com/rstacruz/nprogress

setState(state => ({ ...state, email: 'newValue' }));

<div className="App">{render && <Test />}</div>

https://codesandbox.io/s/qna-q-1137116-i809oq?file...

{MenuItems.map((item) => Object.entries(item).map(([headers, headersItems]) => (
    <div className={s.wrapperSections}>
        <img src={tile} alt={Object.entries(headersItems)[0][0]} />
        <span>{headers}</span>
   </div>
))}

Скорее лучше использовать useState<T | null>(null), т.к. в таком случае можно легко проверить значение в условном рендеринге. А если Вы объявите в вашем компоненте нечто вроде React.FC<{ data: T }>, то Object (точнее ничего, кроме T честным путём) не сможете внутрь прокинуть.

https://codesandbox.io/s/qna-q-1135320-6iz66s

https://codesandbox.io/s/qna-q-1131330-55d4th

interface IWrapper<T> {
  component: T;
}

const Wrapper = <T extends React.ComponentType<any>>({
  component: Component,
  ...props
}: React.PropsWithChildren<IWrapper<T> & React.ComponentProps<T>>) => <Component {...props} />;

https://codesandbox.io/s/qna-q-1127408-6izxcy

interface IDefaultItemsLayout<T> {
  items: T[];
}

export default function DefaultItemsLayout<T>(
    props: React.PropsWithChildren<IDefaultItemsLayout<T>>
) { ... }

<NavLink className={({ isActive }) => isActive ? "link link--active" : "link"} to="/..." end>Ссылка</NavLink>

Просто уберите eslint из зависимостей, он идёт вместе с CRA.

Какую задачу Вы хотите решить?

dangerouslySetInnerHTML