How to extend OverridableComponent interface in Material-UI

Question

I'm trying to use Container component with styled-components using ContainerProps but then I can't pass component prop which belongs to OverridableComponent interface. Code below gives me error which tells me that I can't pass component property. When I change <Container/> to <MuiContainer/> it works.

MuiContainer has type OverridableComponent<ContainerTypeMap<{}, 'div'>> but I can't import OverridableComponent from @material-ui/core

How can I make passing component property possible?

import { Container as MuiContainer, ContainerProps } from '@material-ui/core';
import React from 'react';
import styled from 'styled-components';

const Container = styled(MuiContainer)<ContainerProps>``;

export const Test = () => {
  return (
    <>
      <Container maxWidth="lg" component="main">
        content
      </Container>
    </>
  );
};

Answer 1

Usage of component prop

const Container = styled(MuiContainer)<ContainerProps<'main', { component: 'main' }>>``;