I pass a property which is a string to component List that has flexDirection style property, which is supposed to implement the string. but get error

I pass a property, which is a string, ("raw" | "column ) to component List that has flexDirection style property, which is supposed to implement the string. But I get this error:

Type '{ direction: String; }' is not assignable to type 'FlexDirection | undefined'.
     7 |         listStyleType: 'none',
     8 |         display: 'flex',
  >  9 |         flexDirection: {direction}.

thanks in advance for your help.

List component:

export function List({ children, direction }: { children: any[], direction: String }) {
    return <ul 
    style={{
        listStyleType: 'none',
        display: 'flex',
        flexDirection: {direction},
    //     maxWidth: '80%',
    //     margin: "auto",
    //     backgroundColor: 'white',
        paddingInlineStart: '0px'
        
    }}
    >
        {children.map((child, i) => <div style={{
            border: '1px solid black',
            textAlign: 'center'
        }} key={i}>
            <li>
                {child}
                {direction}
            </li>

        </div>)}
    </ul>
}

Feed component:

async function getJSON(url: string) {
  const res = await fetch(url);
  return res.json();
}

export function Feed() {
  const [posts, setPosts] = useState([{id: '', title: 'initial state'}])
  const [stories, setStories] = useState([{id: '1', title: 'story1'}])
  const [page, setCount] = useState(0);


  useEffect(() => {
    async function setData() {
      setPosts(await getJSON(`../data/posts.json?page=${page}`));
      setStories(await getJSON('./data/stories.json'))
    }
    setData();
    console.log(posts)
  }, [page])

  useEffect(() => {
    console.log('render Feed');
  })


  return <div style={{backgroundColor:'#FAFAFA'}}> 
  {/* <List>{stories.map((story)=>
    <Story story1={story}></Story>)}
  </List> */}
  <Postlist>
  <List direction='column'>{posts.map((post)=>
      <Post post={post}></Post>
    )}</List>
  </Postlist>


  </div>