Maybe instead of creating a separate variable for answer and incorrect, you could create a single array called answers with objects like this:

[{
  answer: "foo",
  correct: false
},
{
  answer: "foo2",
  correct: true
},
// More answers
]

etc.

Then, display items from this array randomly and check the correct parameter to see if the user chose the right answer. Added bonus: this can also work with multiple correct answers.

Good luck!

There many ways to randomise items within specific collection, but definitely the very first thing you need to do - is to create and array (collection) of elements to render:

const choices = [
  { label: "Choice 1", value: 1 },
  { label: "Choice 2", value: 2 },
  ...
  // you can get this data dynamically from any data source
];

And then map this data in your component:

export default function Card({ question, answer, incorrect, headlinecount }) {
  const renderChoice = ({ label }) => (
    <li>{label}</li>
  );

  return (
    <CardStyle>
      <article>
        <h2>Question {headlinecount}</h2>
        <p>{question}</p>
      </article>
      <ChoiceStyle>
        {choices.map(renderChoice)}
      </ChoiceStyle>
      <ButtonDiv>
        <button type="button">Show Answer</button>
        <p>{answer}</p>
      </ButtonDiv>
    </CardStyle>
  );
}

With that structure you are now able to shuffle your collection any time you init your component. You can become familiar with possible shuffling solutions from that question: How to randomize (shuffle) a JavaScript array?

Note: you may need to memoize your component or shuffled results since any component re-render may produce change of the choices order.