How to use the react-native-paper.BottomNavigation.SceneMap function in react-native-paper

this.state = {
      index: 0,
      routes: [
        { key: 'wiki', title: langs.home_tab_wiki!, icon: 'book' },
        { key: 'website', title: langs.home_tab_website!, icon: 'web' },
        { key: 'search', title: langs.home_tab_search!, icon: 'magnify' },
        { key: 'rs', title: langs.home_tab_rs!, icon: 'poll' },
        { key: 'main', title: langs.home_tab_main!, icon: 'account' },
      ],
      loading: true,
      error: ''
    };
  }

  renderScene = BottomNavigation.SceneMap({
    wiki: () => ,
    website: () => ,
    search: () => ,
    rs: () => ,
    main: () => ,
  });

  handleIndexChange = (index: number) => this.setState({ index });

  render() {
    const { rootView } = styles;
    // TODO: render a bottom navigation
    return (

render() {
    return (
       this.setState({ index })}
        // @ts-ignore
        renderScene={BottomNavigation.SceneMap({
          album: PhotoGallery,
          library: PhotoGallery,
          favorites: PhotoGallery,
          purchased: PhotoGallery,
        })}
      />
    );
  }
}

render() {
    return (
       this.setState({ index })}
        // @ts-ignore
        renderScene={BottomNavigation.SceneMap({
          album: PhotoGallery,
          library: PhotoGallery,
          favorites: PhotoGallery,
          purchased: PhotoGallery,
        })}
      />
    );
  }
}

render() {
        return (
            
        );
    }

    _handleIndexChange = index => this.setState({index});

    _renderScene = BottomNavigation.SceneMap({
        single: Contacts,
        groups: Groups,
    });
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    item: {
        padding: 15,
        fontSize: 18,
        height: 70,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',

import React, { useState, useMemo } from 'react'
import { BottomNavigation, SceneProps } from 'react-native-paper'
import { AppBottomNavigation } from '../components/atoms/AppBottomNavigation'
import { HomeScreen } from '../components/pages/HomeScreen'
import { PreferencesScreen } from '../components/pages/Preferences'
import { withNavigationOptions } from '../components/hocs/withNavigationOption'

const routes = [
  { key: 'home', title: 'ホーム', icon: 'home' },
  { key: 'preferences', title: '設定', icon: 'settings' },
]

const scenes = BottomNavigation.SceneMap({
  home: HomeScreen as React.ComponentType>,
  preferences: PreferencesScreen as React.ComponentType>,
})

const MainTabImpl: React.FC = () => {
  const [index, updateIndex] = useState(0)
  const state = useMemo(
    () => ({
      index,
      routes,
    }),
    [index],
  )

  return (