React children не получается вместить компонент внутри компонента

Суть проблемы в том что я хочу поместить в <MainPanel/> Элемент <NewItem/> Но это не получается и я получаю ошибку В типе "{}" отсутствуют следующие свойства из типа "NewItemProps": title, description, imageUrlts(2739) Снизу будет представлен код, я пытался добавлять пропсы для компонента, но ничего не получалось

Компонент который я хочу добавить внутрь:

interface NewItemProps {
    title: string;
    description: string;
    imageUrl: string
}

export const NewItem: React.FC<NewItemProps> = () => {
    return (
        <Container>
            <Box>
                <Text as='h2'>Что-то..</Text>
            </Box>
        </Container>
    )
}

Панель в которую я хочу добавить NewItem:

type Props = {
  children?: React.ReactNode
};

export const MainPanel: React.FC<Props> = ({ children }) => {
  return (
    <Container maxW="100%" display="flex" justifyContent="center" alignItems="center">
      <Box w={{sm: "100vw", lg: "85vw" }} bg="#191a23" p={4} h="150vh" mt={220}>
        {children}
      </Box>
    </Container>
  );
};

App.tsx в котором я обьявляю компоненты:

const App: React.FC = () => {
  return (
    <ChakraProvider theme={theme}>
      <Navbar/>
      <MainPanel>
        <NewItem/>
      </MainPanel>
    </ChakraProvider>
  )
}

export default App

Импорты я не добавлял, но они существуют