Javascript – React: error in passing props from child to parent component

I am working on a project that uses react. I have added another component and I want to pass information from the child component to the parent. the problem is that when I try to use the useState hook it all components disappear from the browser and the app renders an empty root div.

I have noticed that react is being imported and used using import * as React from 'react'; in the tsx file. I tried to change it to import React, { useState } from 'react'; but it gave errors so I tried using the hook using React.useState() and also tried importing use state as import * as React from 'react'; import { useState } from 'react'; but in all cases using the hook in the file cause all the jsx in the file to not show.

also I tried to use other state management solutions such as redux.

import { useDispatch, useSelector } from "react-redux";

import { decrement, increment, incrementByAmount } from "./redux/counter.js";

const { count } = useSelector((state) => state.counter);

const dispatch = useDispatch();

but it gives the error: Property 'counter' does not exist on type 'unknown'.ts(2339) any.
even though counter exists in the relevant folder.