ЯсноПонятно24

import { FC, memo, useEffect } from 'react'; import ReactDOM from 'react-dom'; import { TModalProps } from './type'; import { ModalUI } from '@ui'; const modalRoot = document.getElementById('modals'); export const Modal: FC<TModalProps> = memo(({ title, onClose, children }) => { useEffect(() => { const handleEsc = (e: KeyboardEvent) => { e.key === 'Escape' && onClose(); }; document.addEventListener('keydown', handleEsc); return () => { document.removeEventListener('keydown', handleEsc); }; }, [onClose]); return ReactDOM.createPortal( <ModalUI title={title} onClose={onClose}> {children} </ModalUI>, modalRoot as HTMLDivElement ); }); как использую компонент modal в app сделать так, чтобы компонент IngredientDetails обернутый в modal закрывался по кнопке закрытия , что нужно передать function App() { const dispatch: ThunkDispatch<RootState, unknown, AnyAction> = useDispatch(); useEffect(() => { dispatch(fetchIngredients()); }, [dispatch]); return ( <div className={styles.app}> <AppHeader /> {/* <ConstructorPage /> */} <Routes> <Route path='/' element={<ConstructorPage />} /> <Route path='/feed' element={<Feed />} /> <Route path='/login' element={<Login />} /> <Route path='/register' element={<Register />} /> <Route path='/forgot-password' element={<ForgotPassword />} /> <Route path='/reset-password' element={<ResetPassword />} /> <Route path='/profile' element={<Profile />} /> <Route path='/profile/orders' element={<ProfileOrders />} /> <Route path='*' element={<NotFound404 />} /> <Route path='/feed/:number' element={ <Modal title='Информация о заказе' onClose={() => {}}> <OrderInfo /> </Modal> } /> <Route path='/ingredients/:id' element={ <Modal title='Детали ингредиента' onClose={() => {}}> <IngredientDetails /> </Modal> } /> <Route path='/profile/orders/:number' element={ <Modal title='Заказ' onClose={() => {}}> <OrderInfo /> </Modal> } /> </Routes> </div> );