[chore] updated modal and panel title types to react 18 (#2334)

src/components/src/common/modal.tsx

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, {Component, ReactNode} from 'react';
+import React, {Component, ReactNode, PropsWithChildren} from 'react';
 import {FormattedMessage} from '@kepler.gl/localization';
 
 import styled, {FlattenSimpleInterpolation} from 'styled-components';
@@ -65,7 +65,12 @@ const ModalContent = styled.div`
   z-index: ${props => props.theme.modalContentZ};
 `;
 
-export const ModalTitle = styled.div`
+type ModalTitleProps = PropsWithChildren<{
+  style?: React.CSSProperties;
+  className?: string;
+}>;
+
+export const ModalTitle = styled.div<ModalTitleProps>`
   font-size: ${props => props.theme.modalTitleFontSize};
   color: ${props => props.theme.modalTitleColor};
   margin-bottom: 10px;

src/components/src/side-panel/panel-title.tsx

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React from 'react';
+import React, {PropsWithChildren} from 'react';
 import styled from 'styled-components';
 import classnames from 'classnames';
 
@@ -42,11 +42,10 @@ const PanelHeaderRow = styled.div.attrs({
   margin-bottom: 32px;
 `;
 
-export type PanelTitleProps = {
+export type PanelTitleProps = PropsWithChildren<{
   title: string;
   className?: string;
-  children?: React.ReactNode;
-};
+}>;
 
 const PanelTitleFactory = () => {
   const PanelTitle: React.FC<PanelTitleProps> = ({title, className, children}) => (