How to pass in the initial state of the component - reactjs

Question

I have a React component and I want to test it with React Testing Library. The component has an initial state but I want to override it for my tests and provide a custom initial state so I can test various things. How to I do that in Jest?
function App() {
const initialState = [
{
id: uuidv4(),
date: new Date(),
desc: "initial",
amount: 0,
type: "travel",
},
];
const [expenses, setExpenses] = useState(initialState);
return (
<div className={Styles.app}>
<h1 className="p-4">Expense tracker</h1>
<Container>
<AddExpense setExpenses={setExpenses} expenses={expenses} />
<FilterExpense expenses={expenses} setExpenses={setExpenses} />
<ListExpense setExpenses={setExpenses} expenses={expenses} />
<BreakdownExpense expenses={expenses} />
</Container>
</div>
);
}
I tried the following but it's not working:
test("custom initial state", () => {
const initialState = [
{
id: 1,
date: new Date(),
desc: "test 1",
amount: 0,
type: "10",
},
{
id: 2,
date: new Date(),
desc: "test 2",
amount: 0,
type: "20",
},
{
id: 3,
date: new Date(),
desc: "test 3",
amount: 0,
type: "30",
},
];
const [expenses, setExpenses] = React.useState(initialState);
render(<App expenses={expenses} />);
expect(screen.getByText(/test 1/i)).toBeInTheDocument();
expect(screen.getByText(/test 2/i)).toBeInTheDocument();
});
--- Update
I have a fix for it but I don't like the implementation. I'm putting testing data and logic in the component but I should be keeping them separate.
App comp:
function App({ testApp }) {
const testInitialState = [
{
id: 1,
date: new Date(),
desc: "test 1",
amount: 0,
type: "10",
},
{
id: 2,
date: new Date(),
desc: "test 2",
amount: 0,
type: "20",
},
{
id: 3,
date: new Date(),
desc: "test 3",
amount: 0,
type: "30",
},
];
const initialState = [
{
id: uuidv4(),
date: new Date(),
desc: "initial",
amount: 0,
type: "initial",
},
];
const [expenses, setExpenses] = useState(
testApp ? testInitialState : initialState
);
return (......
test.js:
test(("filter expenses buttons", () => {
render(<App testApp={true} />);
expect(screen.getByText(/test 1/i)).toBeInTheDocument();
expect(screen.getByText(/test 2/i)).toBeInTheDocument();
});