Reactjs 如何将输入表单组件覆盖到ReactMapGL组件上？

我是React应用程序开发的新手。我正在尝试创建一个react应用程序，它使用react map gl库中的react MapGL类。这将渲染贴图（我创建了贴图组件）。我想将一个输入表单（我创建的SampleInputForm组件）显示为该地图上页面右侧的覆盖图。 我正在使用material ui框架进行前端ui设计。以下是代码片段：-

    const useStyles = makeStyles((theme: Theme) =>
      createStyles({
       root: {
        display: 'flex',
        flexDirection: 'column',
        overflow: 'hidden',
    },
  })
)
      <div className={classes.root}>
        <Map />
        <Sampleinputform />
      </div>

const useStyles=makeStyles（（主题：主题）=>
创建样式({
根目录：{
显示：“flex”，
flexDirection:'列'，
溢出：“隐藏”，
},
})
)

这将在页面中地图框区域的下方显示表单。 如果我在地图组件中使用Sampleinputform作为子组件，那么它可以正常工作，我会在页面右上方的地图框顶部获得一个覆盖输入表单，下面是代码片段：-

export default function Map() {
return (
    <ReactMapGL>
      // some code to render the map goes here
      <SampleInputForm/>
    </ReactMapGL>
}

导出默认函数映射（）{
返回(
//下面是一些渲染贴图的代码
}

我在第一个代码段中缺少了什么，这样我就不需要在映射组件中传递表单了？

使用找到的--

我能够将我的组件

放置在

外部

。控制面板{
#样式元素在这里
}
const defaultContainer=（{children}）=>{children}
const SampleInputForm:React.FC=（）=>{
const Container=defaultContainer
返回(
//输入组件在这里
)
}

请建议是否有其他更好的解决方案

.control-panel{
#the styling elements goes here
}

const defaultContainer = ({ children }) => <div className="control-panel">{children}</div>

const SampleInputForm: React.FC = () => {
    const Container = defaultContainer
  return (
    <Container>
          <form noValidate> 
             //Input components goes here
          <form> 
    </Container> )
}