fix: Replace Box with BottomNavigationAction to fix React prop warning

maternal-web/components/layouts/TabBar/TabBar.tsx

@@ -64,20 +64,18 @@ export const TabBar = () => {
         >
           {tabs.map((tab) => {
             if (tab.value === 'voice') {
-              // Center voice button
+              // Center voice button - using BottomNavigationAction as wrapper to avoid prop warnings
               return (
-                <Box
+                <BottomNavigationAction
                   key="voice-placeholder"
-                  sx={{
-                    flex: 1,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                  }}
-                >
+                  label=""
+                  value="voice"
+                  showLabel={false}
+                  icon={
                     <IconButton
                       aria-label="voice command"
-                    onClick={() => {
+                      onClick={(e) => {
+                        e.stopPropagation();
                         const voiceButton = document.querySelector('[aria-label="voice input"]') as HTMLButtonElement;
                         if (voiceButton) {
                           voiceButton.click();
@@ -95,7 +93,9 @@ export const TabBar = () => {
                     >
                       <Mic />
                     </IconButton>
-                </Box>
+                  }
+                  sx={{ minWidth: 80 }}
+                />
               );
             }
             return (