When I type some text in the inputfield it shows some data when I log inside the reducer, also the console.log(state.genreList) outputs an array. But it will not update the mapStateToProps inside the SearchInput.tsx In action and reducer I see the value is being passed correctly, but still confused why it will not pass them to mapStateToProps. Do I miss something?

To give you a better understanding I will add a codesandbox.

link to codesandbox

// Reducer
import { types } from "../actions";

const initialState = {
    genreList: [],
    videoList: [],
    inputValue: ""
};

export const videoList = (state = initialState, action: any) => {
    switch(action.type) {
    case types.GET_DATA: {
        return {
            ...state,
            genreList: [...state.genreList, action.data]
        };
    }

    case types.GET_INPUT_VALUE: {
        return {
            ...state,
            inputValue: action.value
        }
    }

    default: 
        return state;
    }
};

export default videoList;

// Component
import React, {  useEffect } from 'react';
import { connect, useDispatch, ConnectedProps } from "react-redux";
import { getData, getInput } from "../../actions/index";
import axios from 'axios';

interface Genre {
    id: number;
    name: string;
}

interface Video {
    id: number;
    artist: string;
    title: string;
    release_year: number;
    genre_id: number;
    image_url: string;
}

interface IProps {
    genres?: Genre[];
    videos?: Video[];
    input_value?: string;
  }

export const SearchInput: React.FC<InputProps | IProps> = () => {
    const dispatch = useDispatch();

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios.get('https://raw.githubusercontent.com/XiteTV/frontend-coding-exercise/main/data/dataset.json');
                dispatch(getData(response.data));
            } catch (err) {
                console.log(err)
            }
        }
        fetchData();
    }, [dispatch]);

    const passValue = (e: string) => {
        dispatch(getInput(e));
    }

    return (
        <div>
            <input type="text" onChange={(e) => passValue(e.target.value)}/>
            <div>Search Input</div>
        </div>
    )
}


function mapStateToProps(state: any){
    // why I dont see anything here????
    console.log(state);
    return {
        genres: state.genreList,
    }
}


const connector = connect(mapStateToProps);
type InputProps = ConnectedProps<typeof connector>;
export default connect(SearchInput);