React REDUX not updating the state to the new one - reactjs

Question

Just trying to build a simple react-redux code here. Whenever I click one of the button with some data value attached to it, I just want it to use it to update state of my react app.
The directory composition is :
src/index.js
src/App.js
src/reduxButtonGroup.js
src/reduxActions.js
src/reducers/index.js
src/reduxStore.js
src/reduxHelloWorld.js
Now, coming to the codes here is how App.js looks like:
import React from 'react';
import HelloWorld from './reduxHelloWorld.js';
import {store} from './reduxStore.js'
import ButtonGroup from './reduxButtonGroup.js';
import 'bootstrap/dist/css/bootstrap.min.css';
class App extends React.Component {
render(){
return(
<React.Fragment>
<HelloWorld name = {store.getState().name} />
<ButtonGroup names = {["NameA","NameB","NameC"]}/>
</React.Fragment>
)
}
}
export default App;
Here is how reduxButtonGroup.js looks like:
import React from 'react';
import Button from 'react-bootstrap/Button';
import {store} from './reduxStore.js';
import {setName} from './reduxActions.js';
const ButtonGroup = ( {names} ) => (
<div>
{names.map((name,i) => (
<Button data-name={name} key={`btn-${i}`} style={{marginRight: "15px"}} className={"btn btn-danger"} onClick={dispatchBtnAction}>
{name}
</Button>
))}
</div>
);
function dispatchBtnAction(e){
const name = e.target.dataset.name;
console.log(name);
store.dispatch(setName(name));
}
export default ButtonGroup;
And reduxActions.js:
export function setName (name) {
return {
type: "SET_NAME",
name: name
}
}
Also, reducers/index.js:
export default (state,action) => {
console.log(action.name)
switch(action.type){
case "SET_NAME":
console.log("here")
return{
...state,
name: action.name
};
default:
return state;
}
};
Here is how reduxStore.js looks like:
import {createStore} from 'redux';
import reducer from "./reducers";
const initialState = { name: "initialName " };
export const store = createStore(reducer, initialState);
And at last reduxHelloWorld.js:
import React from 'react';
class HelloWorld extends React.Component{
render(){
return(
<React.Fragment>
<h1>Hello {this.props.name}</h1>
</React.Fragment>
)
}
}
export default HelloWorld;
Now, in the terminal I can see the right values in action.type and action.name . However I think that somehow the part shown below is not working. i.e., I'm unable to update my state variable called name to action.name .
return{
...state,
name: action.name
};
Though I'm getting the right values, my component is not getting rendered with the right values. Any idea what I'm doing wrong over here. Any help would be highly appreciated.