Как отобразить первую вкладку, используя вкладки пользовательского интерфейса материала в реакции?

Привет! Я использую библиотеку пользовательского интерфейса материалов в своем проекте реагирования. Все работает, но у меня есть одна проблема. Проблема в том, что я не могу отобразить первую вкладку. Поэтому, когда я открываю свой сайт, все вкладки закрываются, и только когда я нажимаю на ссылку, я вижу вкладку. Итак, как отобразить первую вкладку?

Вот мой код компонента реакции, который включает в себя эти вкладки:

import React, {useState} from 'react';
import Table from "../assets/img/table.png";
import Box from '@mui/material/Box';
import Tab from '@mui/material/Tab';
import TabContext from '@mui/lab/TabContext';
import TabList from '@mui/lab/TabList';
import TabPanel from '@mui/lab/TabPanel';
import SectionTab from "./SectionTab";
import { createTheme } from '@mui/material/styles';
import {ThemeProvider} from "@mui/material";

function Tabs(props) {

   const tabs = [
       {
           id: 1,
           idInString: "1",
           tabCards: [
               {
                   img: Table,
                   title: 'School desk',
                   price: '1000$',
                   id: 0
               },
               {
                   img: Table,
                   title: 'School desk',
                   price: '1000$',
                   id: 1
               },
               {
                   img: Table,
                   title: 'School desk',
                   price: '1000$',
                   id: 2
               },
               {
                   img: Table,
                   title: 'School desk',
                   price: '1000$',
                   id: 3
               },
               {
                   img: Table,
                   title: 'School desk',
                   price: '1000$',
                   id: 4
               },
               {
                   img: Table,
                   title: 'School desk',
                   price: '1000$',
                   id: 5
               },
           ]
       },

       {
           id: 2,
           idInString: "2",
           tabCards: [
               {
                   img: Table,
                   title: 'Cool table',
                   price: '1000$',
                   id: 0
               },
               {
                   img: Table,
                   title: 'School desk',
                   price: '1000$',
                   id: 1
               },
               {
                   img: Table,
                   title: 'School desk',
                   price: '1000$',
                   id: 2
               },
               {
                   img: Table,
                   title: 'School desk',
                   price: '1000$',
                   id: 3
               },
               {
                   img: Table,
                   title: 'School desk',
                   price: '1000$',
                   id: 4
               },
               {
                   img: Table,
                   title: 'School desk',
                   price: '1000$',
                   id: 5
               },
           ]
       },

       {
           id: 3,
           idInString: "3",
           tabCards: [
               {
                   img: Table,
                   title: 'School desk',
                   price: '1000$',
                   id: 0
               },
               {
                   img: Table,
                   title: 'School desk',
                   price: '1000$',
                   id: 1
               },
               {
                   img: Table,
                   title: 'School desk',
                   price: '1000$',
                   id: 2
               },
               {
                   img: Table,
                   title: 'School desk',
                   price: '1000$',
                   id: 3
               },
               {
                   img: Table,
                   title: 'School desk',
                   price: '1000$',
                   id: 4
               },
               {
                   img: Table,
                   title: 'School desk',
                   price: '1000$',
                   id: 5
               },
           ]
       },

       {
           id: 4,
           idInString: "4",
           tabCards: [
               {
                   img: Table,
                   title: 'School desk',
                   price: '1000$',
                   id: 0
               },
               {
                   img: Table,
                   title: 'School desk',
                   price: '1000$',
                   id: 1
               },
               {
                   img: Table,
                   title: 'School desk',
                   price: '1000$',
                   id: 2
               },
               {
                   img: Table,
                   title: 'School desk',
                   price: '1000$',
                   id: 3
               },
               {
                   img: Table,
                   title: 'School desk',
                   price: '1000$',
                   id: 4
               },
               {
                   img: Table,
                   title: 'School desk',
                   price: '1000$',
                   id: 5
               },
           ]
       },

       {
           id: 5,
           idInString: "5",
           tabCards: [
               {
                   img: Table,
                   title: 'School desk',
                   price: '1000$',
                   id: 0
               },
               {
                   img: Table,
                   title: 'School desk',
                   price: '1000$',
                   id: 1
               },
               {
                   img: Table,
                   title: 'School desk',
                   price: '1000$',
                   id: 2
               },
               {
                   img: Table,
                   title: 'School desk',
                   price: '1000$',
                   id: 3
               },
               {
                   img: Table,
                   title: 'School desk',
                   price: '1000$',
                   id: 4
               },
               {
                   img: Table,
                   title: 'School desk',
                   price: '1000$',
                   id: 5
               },
           ]
       },

   ];

   const links = [
       {
           name: 'Tables',
           id: 0
       },
       {
           name: 'Tables',
           id: 1
       },
       {
           name: 'Tables',
           id: 2
       },
       {
           name: 'Tables',
           id: 3
       },
       {
           name: 'Tables',
           id: 4
       },
   ]

   // #F08C00

   const tabsTheme = createTheme({
       palette: {
           primary: {
               light: '#ffaa36',
               main: '#F08C00',
               dark: '#a05e00',
               contrastText: '#fff',
           },
           secondary: {
               light: 'black',
               main: 'black',
               dark: '#ba000d',
               contrastText: '#000',
           },
       },
   });


   const [value, setValue] = React.useState(0);

   const handleChangeEvent = (event, newValue) => {
       setValue(newValue);
   };

   return (
       <div className = "tabs-container">
           <h1 className = "tabs-title">Products</h1>
           <ThemeProvider theme = {tabsTheme}>
               <Box sx = {{width: '100%', typography: 'body1', marginTop: '50px'}}>
                   <TabContext value = {value}>
                       <Box sx = {{borderBottom: 1, borderColor: 'divider', maxWidth: '1200px', margin: '0 auto'}}>
                           <TabList onChange = {handleChangeEvent}
                                    aria-label = "lab API tabs example"
                                    variant = "scrollable"
                                    scrollButtons
                                    allowScrollButtonsMobile
                           >
                               <Tab label = "Tables & desks" value = "1"/>
                               <Tab label = "Sofas" value = "2"/>
                               <Tab label = "Beds" value = "3"/>
                               <Tab label = "Bookcases & wardrobes" value = "4"/>
                               <Tab label = "Kitchens" value = "5"/>
                           </TabList>
                       </Box>
                       {tabs.map( (tab) =>
                           <TabPanel value = {tab.idInString}>
                               <SectionTab key = {tab.id} cards = {tab.tabCards}/>
                           </TabPanel>
                       )}
                   </TabContext>
               </Box>
           </ThemeProvider>
       </div>
   );
}

export default Tabs;

Пожалуйста, помогите мне решить эту проблему!