To ensure that the active tab in the Chakra UI Tab component is updated when the value in Redux changes, you can use the useEffect hook provided by React. The useEffect hook allows you to perform side effects such as updating the active tab when a specific dependency changes.

You can modify the MyTabs component as follows:

import { useEffect } from 'react';
    import { useSelector, useDispatch } from 'react-redux';
    import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@chakra-ui/react';
    import { selectNumber, updateNumber } from 'path/to/your/redux/slice';
    function MyTabs() {
      const number = useSelector(selectNumber);
      const dispatch = useDispatch();
      useEffect(() => {
        // Update the active tab index in Redux when the number changes
        dispatch(updateNumber(number));
      }, [number, dispatch]);
      return (
        <Tabs defaultIndex={number}>
          <TabPanels>
            <TabPanel>
              <Image boxSize="200px" fit="cover" src="" />
            </TabPanel>
            <TabPanel>
              <Image boxSize="200px" fit="cover" src="" />
            </TabPanel>
          </TabPanels>
          <TabList>
            <Tab>Naruto</Tab>
            <Tab>Sasuke</Tab>
          </TabList>
        </Tabs>
      );
    }**'

In this updated code, the useEffect hook is used to dispatch an operation (updateNumber) when the value changes. Make sure you have implemented the appropriate operations and reducer logic (selectNumber) in your Redux slice to handle numeric updates.

By doing this, the active tab will automatically update based on the numerical value stored in Redux.

defaultIndex The properties are:

See Controlled and Uncontrolled Components and Default Values ​​ Documentation:

You can use Controlled tab

const tabIndex = useSelector(selectnumber);
const dispatch = useDispatch();

<Tabs 
  index={tabIndex} 
  onChange={(index) => dispatch({ type: 'SET_TAB_INDEX', payload: { index } })}>
</Tabs>