React / Redux / Send text typed on textarea to the store

my action:

export const ON_MESSAGE = 'ON_MESSAGE';

export const sendMessage = (text, sender = 'user') => ({
  type: ON_MESSAGE,
  payload: { text, sender },
});

my reducer:

const initalState = [{ text: [] }];

const messageReducer = (state = initalState, action) => {
  switch (action.type) {
    case ON_MESSAGE:
      return [...state, action.payload];
    default:
      return state;
  }
};

export default messageReducer;

my code:

const Chat = props => {
  const dispatch = useDispatch();
  const messages = useSelector(state => state.Chat);

  return (
    <Styled.ChatBox>
      <Styled.ChatHeader>
        <p>Chat Bot</p>
        <div>
          <FontAwesomeIcon icon={faAngleDown} size="1x" color="white" />
          <FontAwesomeIcon icon={faTimes} size="1x" color="white" />
        </div>
      </Styled.ChatHeader>
      <Styled.ChatLog></Styled.ChatLog>
      <Styled.ChatInput>
        <textarea placeholder="Digite aqui sua mensagem" />
        <button onClick={dispatch(sendMessage)}>
          <FontAwesomeIcon icon={faPaperPlane} size="lg" color="black" />
        </button>
      </Styled.ChatInput>
    </Styled.ChatBox>
  );
};

export { Chat };

Hello basically i would like to know how i would send the value typed in my text to my redux store

and also how I would display this typed value in my component

> <Styled.ChatLog> </ Styled.ChatLog>

basically each message should generate a div (a component)

> <Styled.ChatMessage />