The function you need is that accepts event and then sets state, but You have passed funtcion that returns that function instead of setting state.

You have written:

onChange={textHandler}

Insetad you have to run that function to get event accepted function.

Solution 1:

  const [enteredText, setEnteredText] = useState("");

  const textHandler = () => event =>{
    setEnteredText(event.target.value);
  };
  const submitHandler = (event) => {
    event.preventDefault();

    const textData = {
      text: enteredText,
    };
    console.log(textData);
  };
  return (
    <Post onSubmit={submitHandler}>
      <TopPost>
        <ProfilePicture></ProfilePicture>
        <Input
          placeholder="What's happening?"
          required
          onChange={textHandler()} // Here you have to run this function instead just passing
        />
      </TopPost>
      <BottomPost>
        <Button type="submit">Post</Button>
      </BottomPost>
    </Post>
  );

Solution 2 (Recomended, since I can't see the need of returninng function)

  const [enteredText, setEnteredText] = useState("");

  // Just use event handler funtion, no need to return nested function
  const textHandler = event => {
    setEnteredText(event.target.value);
  };
  const submitHandler = (event) => {
    event.preventDefault();

    const textData = {
      text: enteredText,
    };
    console.log(textData);
  };
  return (
    <Post onSubmit={submitHandler}>
      <TopPost>
        <ProfilePicture></ProfilePicture>
        <Input
          placeholder="What's happening?"
          required
          onChange={textHandler}
        />
      </TopPost>
      <BottomPost>
        <Button type="submit">Post</Button>
      </BottomPost>
    </Post>
  );

Try this! and figure out your mistake still can't find it then let me know. styled-component should be outside you `Post component like this

import React from 'react';
import { useState } from 'react';
import styled from 'styled-components';

const Post = styled.form`
  height: 20vh;
  display: flex;
  justify-content: center;
  background-color: white;
  margin: 0vh 2vw;
  border-radius: 6px;
  flex-direction: column;
`;
const TopPost = styled.div`
  display: flex;
  justify-content: space-evenly;
  height: 50%;
  align-items: center;
`;
const ProfilePicture = styled.div`
  height: 40px;
  border-radius: 100%;
  background-color: red;
  width: 40px;
`;
const Input = styled.input`
  width: 80%;
  border-radius: 6px;
  padding: 2vh 1vw;
  border: transparent;
  background-color: #f0f2f4;
  font-weight: 500;
`;
const BottomPost = styled.div`
  height: 50%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
`;
const Button = styled.button`
  margin-right: 2vw;
  color: white;
  padding: 0.8vw 2.5vw;
  background-color: #377dff;
  border-radius: 6px;
  outline: none;
  border: none;
  cursor: pointer;
`;

export default function CreatePost() {
  const [enteredText, setEnteredText] = useState('');

  // Just use event handler funtion, no need to return nested function
  const textHandler = event => {
    setEnteredText(event.target.value);
  };
  const submitHandler = event => {
    event.preventDefault();

    const textData = {
      text: enteredText,
    };
    console.log(textData);
  };
  return (
    <Post onSubmit={submitHandler}>
      <TopPost>
        <ProfilePicture></ProfilePicture>
        <Input placeholder="What's happening?" required onChange={textHandler} />
      </TopPost>
      <BottomPost>
        <Button type='submit'>Post</Button>
      </BottomPost>
    </Post>
  );
}

I believe it is because you have additional parentheses in the textHandler function here they shouldn't be.

You wrote:

const textHandler = () => event =>{
   setEnteredText(event.target.value);
};

While it should be:

const textHandler = event => {
   setEnteredText(event.target.value);
};